JS实现简单的浮动碰撞效果示例
程序员文章站
2022-10-18 20:38:57
本文实例讲述了js实现简单的浮动碰撞效果。分享给大家供大家参考,具体如下:
本文实例讲述了js实现简单的浮动碰撞效果。分享给大家供大家参考,具体如下:
<html> <head> <meta charset="utf-8"> <title>www.jb51.net 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.jb51.net/images/logo.gif"/> </div> </body> </html>
运行效果:
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript运动效果与技巧汇总》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
下一篇: 华为WATCH手表怎么更换表带?