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 each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
js添加事件的通用方法推荐
May 15 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
Javascript中的数学函数集合
2007/05/08 Javascript
DHTML Slide Show script图片轮换
2008/03/03 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
Python实现命令行通讯录实例教程
2016/08/18 Python
Python实现登陆文件验证方法
2018/10/06 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
python接口自动化框架实战
2020/12/23 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
网页设计个人找工作求职信
2013/11/28 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
喝酒检查书范文
2014/02/23 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
先进工作者申报材料
2014/12/23 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
变长双向rnn的正确使用姿势教学
2021/05/31 Python
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android