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


Posted in Javascript onDecember 28, 2017

本文实例讲述了JS实现简单的浮动碰撞效果。分享给大家供大家参考,具体如下:

<html>
<head>
<meta charset="UTF-8">
<title>3water.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="https://3water.com/images/logo.gif"/>
</div>
</body>
</html>

运行效果:

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

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

Javascript 相关文章推荐
jquery nth-child()选择器的简单应用
Jul 10 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 #Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 #Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 #Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 #Javascript
Angular实现的简单定时器功能示例
Dec 28 #Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 #Javascript
vue+swiper实现侧滑菜单效果
Dec 28 #Javascript
You might like
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Django forms组件的使用教程
2018/10/08 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
python根据时间获取周数代码实例
2019/09/30 Python
python程序需要编译吗
2020/06/19 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
DataReader和DataSet的异同
2014/12/31 面试题
银行会计职员个人的自我评价
2013/09/29 职场文书
生物化工工艺专业应届生求职信
2013/10/08 职场文书
资源环境与城市管理专业推荐信
2013/11/30 职场文书
篮球比赛策划方案
2014/06/05 职场文书
2014年平安夜寄语
2014/12/08 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
2014年底个人工作总结
2015/03/10 职场文书
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫