首页 > 代码库 > jquery飘动的广告窗
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); })
jquery飘动的广告窗
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。