页面广告飘窗

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

　　

转载于:https://www.cnblogs.com/chengjunL/p/7048793.html