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模拟SELECT下拉框取值效果
Oct 23 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
教师自我鉴定
2013/12/13 职场文书
高中语文教学反思
2014/01/16 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
承诺书格式
2014/06/03 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python