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 相关文章推荐
js 多浏览器分别判断代码
Apr 01 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
javascript的事件触发器介绍的实现
2014/06/05 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
Python按行读取文件的简单实现方法
2016/06/22 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
python提取log文件内容并画出图表
2019/07/08 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
电钳专业个人求职信
2014/01/04 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
项目建议书范文
2014/05/12 职场文书
2015年元旦标语大全
2014/12/09 职场文书
2016教师国培研修感言
2015/12/08 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android