本文实例讲述了JS实现简单的浮动碰撞效果。分享给大家供大家参考，具体如下：
<html><head><meta charset="UTF-8"><title>www.VeVB.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.VeVB.COm/images/logo.gif"/></div></body></html>运行效果：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
新闻热点
疑难解答
