JS实现简单的浮动碰撞效果示例
又见水出处 人气:0本文实例讲述了JS实现简单的浮动碰撞效果。分享给大家供大家参考,具体如下:
<html> <head> <meta charset="UTF-8"> <title>www.qb5200.com JS碰撞效果</title> <script language="javascript"> <!-- directX=1; //X轴方向 directY=1; //Y轴方向 sunX=0; sunY=0; function sunMov(){ //定两个方向 sunX+=directX*2; sunY+=directY*2; //修改div的left top sundiv.style.top=sunY+"px"; sundiv.style.left=sunX+"px"; //判断什么时候,转变方向 //x方向(offestWidth可以返回,当前这个对象的实际宽度) if(sunX+sundiv.offsetWidth>=document.body.clientWidth || sunX<=0){ directX=-directX; } if(sunY+sundiv.offsetHeight>=document.body.clientHeight || sunY<=0){ directY=-directY; } } setInterval("sunMov()",10); //--> </script> </head> <body style="/*background-image:URL('a.jpg');background-size:cover; background-repeat:no-repeat*/"> <div id="sundiv" style="position:absolute"> <img src="//www.qb5200.com/images/logo.gif"/> </div> </body> </html>
运行效果:
希望本文所述对大家JavaScript程序设计有所帮助。
加载全部内容