JS实现简单的浮动碰撞效果示例

2024-05-06 16:41:39

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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="http://www.vevb.com/images/logo.gif"/></div></body></html>

希望本文所述对大家JavaScript程序设计有所帮助。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：使用nodejs+express实现简单的文件上传功能

下一篇：JS控制鼠标拒绝点击某一按钮的实例