漂浮效果
<!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>
?
轉(zhuǎn)載于:https://www.cnblogs.com/yaobolove/p/4703075.html
總結(jié)
- 上一篇： hdu 4324 Triangle L
- 下一篇： Autodesk 首届开发者训练营所有讲