页面广告飘窗
HTML结构如下
<div class="fafa" style="width: 160px;height: 160px;background: #acf;position: fixed;z-index: 999;"></div>
js逻辑也非常简单,就是移动left和top的值,代码如下
!function($dom){ var winWidth = window.innerWidth; var winHeight = window.innerHeight; window.onresize = function(){ winWidth = window.innerWidth; winHeight = window.innerHeight; } var $left = 0,$top = 0,a = 1,b = 1,speed = 2; function goFun(posit,speed){ return posit + speed; } var t = setInterval(function(){ $left = goFun($left,speed*a) if( $left >= (winWidth-$dom.offsetWidth)){ a = -1; }else if($left <= 0){ a = 1; } $top = goFun($top,speed*b) if( $top >= (winHeight-$dom.offsetHeight)){ b = -1; }else if($top <= 0){ b = 1; } $dom.style.cssText += "left:"+$left+"px;top:"+$top+"px"; },20) }(document.getElementsByClassName('fafa')[0]);