JS实现简单的浮动碰撞效果示例
2017-12-28 15:44
871 查看
本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JS简单实现浮动窗口效果示例
- JS+html5 canvas实现的简单绘制折线图效果示例
- JS实现的简单轮播图运动效果示例
- JS实现的简单折叠展开动画效果示例
- JS简单浮动碰撞效果
- js实现的简单图片浮动效果完整实例
- JS实现简单易用的手机端浮动窗口显示效果
- JS实现简单易用的手机端浮动窗口显示效果
- 原生JS实现多个小球碰撞反弹效果示例
- JS实现的简单拖拽购物车功能示例【附源码下载】
- js实现简单的联动菜单效果
- JS实现在文本指定位置插入内容的简单示例
- js实现简单的星级选择器提交效果适用于评论等
- JS实现的N多简单无缝滚动代码(包含图文效果)
- JS实现的自动打字效果示例
- 简单实现js放大镜效果
- jQuery实现简单的网页换肤效果示例
- 原生JS实现简单的放大镜效果
- js 实现无干扰阴影效果 简单好用(附文件下载)
- jQuery实现的简单手风琴效果示例