jquery飄動的廣告窗

看到網頁中有一些廣告窗口移動，自己就動手實現了一下。畢竟編程動手很重要

實現思路：

1，廣告窗口移動就要開定時器，同時往窗口的x軸方向和y軸方向移動。當移動到可視區域范圍邊緣，又向

反方向移動。所以要對窗口廣告的x和y軸分別做2次判斷。是否到邊界。到了邊界，就改變運行速度，

反方向移動。

 

此廣告窗口，我用的一張圖片模擬。具體如下：

html:

 <img src="images/move.jpg"/>

css:

  img{
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }

jq:

       $(function(){

            var windowheight=$(window).height();
           var imgheight=$("img").height();
           var windowwidth=$(window).width();
           var imgwidth=$("img").width();

         var ispeedy=0;/*******距離窗口頂部距離********/
           var vy=10;/*******y軸運行速度********/
           var ispeedx=0;/*******距離窗口左邊距離********/
           var vx=10;/*******x軸運行速度********/


           function move(){
                if(ispeedx>=windowwidth-imgwidth){
                    ispeedx=windowwidth-imgwidth;      /*******距離窗口左部距離等於可視區域減去廣告窗口的寬度。就是到了屏幕底部********/
                    vx=-10;                               /*******速度值為負數。廣告窗回走********/
                }
               if(ispeedx<=0){                        /*********距離可視區域為0 ******/
                   vx=10;                           /*******速度值為正數數。廣告窗又回走********/
               }

               if(ispeedy<0){
                   vy=10
               }
               if(ispeedy>=windowheight-imgheight){
                  ispeedy=windowheight-imgheight;
                   vy=-10
               }

               ispeedy+=vy;
               ispeedx+=vx;
               $("img").animate({top:ispeedy,left:ispeedx},100);

           }
           var timer=null;
           timer=setInterval(function(){
             move()  },100);
       })