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