yay -- corrected; also, added Caching and Easing:
http://pastie.org/private/pegbur0eetnzhoiqkpd5w
thanks!
-B
On 22 Nov., 13:34, Balazs Endresz <[EMAIL PROTECTED]> wrote:
> I fear it won't help much but you can try caching some values outside
> the event handler:
> var mx=$(window).width(), my=$(window).height(), $k=$('#k');
>
> Also, you set the duration in the wrong place, that should be in the
> second
> argument:http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback
> And why is it 1ms?
>
> On Nov 21, 8:16 pm, bnlps <[EMAIL PROTECTED]> wrote:
>
> > Hi, kids --
>
> > there's a nice Flash site ... marcecko dot com ( especially, the
> > window-content-movement, mouse.x/y)
>
> > ... ported to html/jQ, but couldn't find a way to realise the "smooth
> > sliding" part while moving; it's f'd, scratchy.
> > any solutions? or, a Flash-only thing?
>
> > thanks!
> > -B
>
> > now, have a look:
> > (tested on FF3, IE7 -- XP)
> > -----------------------------------------------------------------
>
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
>
> > <html xmlns="http://www.w3.org/1999/xhtml"; lang="en" xml:lang="en">
>
> > <head>
>
> > <title>jQx</title>
>
> > <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
>
> > <style type="text/css" media="all">
> > <!--
> > html{width:100%;height:100%;overflow:hidden;}
> > body,div{margin:0;padding:0;}
> > div{position:absolute;left:0px;top:0px;width:1600px;height:1200px;}
> > span{position:absolute;}
> > -->
> > </style>
>
> > <script type="text/javascript" src="http://jqueryjs.googlecode.com/
> > files/jquery-1.2.6.min.js"></script>
>
> > <script type="text/javascript">
> > //<![CDATA[
>
> > var mx,my;
>
> > $(function(){
>
> > $().mousemove(function(e){
>
> > mx=$(window).width();
> > mx=Math.ceil((-e.pageX/mx*(16E2-mx)));
>
> > my=$(window).height();
> > my=Math.ceil((-e.pageY/my*(12E2-my)));
>
> > $('#k').dequeue().animate({left:mx,top:my,duration:1}); // !
>
> > // $('#k').css({left:mx,top:my}); ... 1:1
>
> > });
> > });
>
> > //]]>
> > </script>
>
> > </head>
>
> > <body>
>
> > <div id="k">
> > <span style="top:0px;left:0px;height:50px;width:50px;background-
> > color:#cff;"></span>
> > <span style="bottom:0px;left:1550px;height:50px;width:50px;background-
> > color:#e10;"></span>
> > <span style="top:0px;left:1550px;height:50px;width:50px;background-
> > color:#0cc;"></span>
> > <span style="top:1150px;left:0px;height:50px;width:50px;background-
> > color:#3fa;"></span>
> > <span style="top:50px;left:300px;height:100px;width:300px;background-
> > color:#333;"></span>
> > <span style="top:300px;left:200px;height:700px;width:150px;background-
> > color:#f6c;"></span>
> > <span style="top:500px;left:400px;height:500px;width:850px;background-
> > color:#aba;"></span>
> > <span style="top:300px;left:600px;height:100px;width:950px;background-
> > color:#ff0;"></span>
> > </div>
>
> > </body>
>
> > </html>
