jquery飘动的广告窗

Posted 2020-09-08 晓晓de烟火

看到网页中有一些广告窗口移动，自己就动手实现了一下。毕竟编程动手很重要

实现思路：

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);
       })