标签:
<!doctype html> <html> <head> <title>漂浮效果</title> </head> <body> <div style="position:absolute;" onMouseOver="window.clearInterval(timer)" onMouseOut="creatTimer()"> <img src="images/1.jpg" style="width:160px; height:160px;" /> </div> <script> var obj=document.getElementsByTagName("div").item(0); var clientHeight=document.documentElement.clientHeight; var clientWidth=document.documentElement.clientWidth; function randomNum(size){ return Math.floor(Math.random()*(size-160+1)); } obj.style.top=randomNum(clientHeight)+"px"; obj.style.left=randomNum(clientWidth)+"px"; var y=parseInt(obj.style.top); var x=parseInt(obj.style.left); var flagX=false; var flagY=true; function moveY(){ if(flagY){ y++; if(y>clientHeight-160){ flagY=false; } }else{ y--; if(y<0){ flagY=true; } } obj.style.top=y+"px"; } function moveX(){ if(flagX){ x++; if(x>clientWidth-160){ flagX=false; } }else{ x--; if(x<0){ flagX=true; } } obj.style.left=x+"px"; } window.onresize=function(){ clientHeight=document.documentElement.clientHeight; clientWidth=document.documentElement.clientWidth; } function creatTimer(){ timer=window.setInterval("moveY(),moveX()",10); } creatTimer(); </script> </body> </html>
标签:
原文地址:http://www.cnblogs.com/yaobolove/p/4703075.html