js实现div的碰壁反弹效果
文章地址 https://www.cnblogs.com/sandraryan/
需求： 写一个div，让div在父级进行匀速运动，碰到父级上下左右的边框，就向反方向运动。
碰壁反弹在游戏制作中很常用~~~~
<style>
.wrap {
width: 1000px;height: 500px;
border: 1px solid red;
margin: 40px auto;
position: relative;
box-sizing: border-box; }
.box {
width: 100px;height: 100px;
background-color: green;
position: absolute;
top: 100px;left: 200px;
/* border: 1px solid red; */
/* 因为父元素有border，所以，可以给子元素也加一个边框，更好的解决方式是给父元素加box-sizing: border-box;总之就是算的时候宽高符合就行了*/
}
</style>
<body>
<div class="wrap">
<div class="box"></div>
</div> <script>
// 获取元素
var wrap = document.getElementsByTagName("div")[0];
var box = document.getElementsByTagName("div")[1]; //让元素动起来
// 添加两个变量，用于更换运动方向
var a = 1;
var b = 1;
// 获取元素的可运动空间，用父元素的宽高减去子元素的宽高
var w = wrap.offsetWidth - box.offsetWidth;
var h = wrap.offsetHeight - box.offsetHeight; // console.log(w,h); setInterval(function(){
// 获取元素当前left
var l = box.offsetLeft;
if(l == w || l == 0){
// 如果到达可运动空间最大值和最小值的时候，a 变成负值
a *= -1;
}
// 把元素距离左边的值每10ms加1px
// a变成负值可以改变运动方向
box.style.left = l + a + "px"; // 垂直方向同水平方向
var t = box.offsetTop;
if(t == h || t == 0){
b *= -1;
}
box.style.top = t + b + "px";
},10); </script>
</body>
js实现div的碰壁反弹效果的更多相关文章
- 原生js实现一个DIV的碰撞反弹运动，并且添加重力效果
继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...
- 原生js实现一个DIV的碰撞反弹运动
原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...
- 原生js实现多个随机大小颜色位置速度小球的碰壁反弹
文章地址 https://www.cnblogs.com/sandraryan/ 需求:生成n个小球,让他们在一个大盒子中碰壁反弹,要求小球随机颜色,大小,初始位置,运动速度. 思路分析: 创建小球随 ...
- js中小球碰壁反弹
一. 在指定容器内的碰壁反弹 <!DOCTYPE HTML> <html> <head> <title></title> <meta ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- 原生JS、CSS实现的转盘效果（目前仅支持webkit）
这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...
- js实现中文简繁切换效果
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- js鼠标滑动图片显示隐藏效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...
随机推荐
- 说说a标签的onclick和href
在平时我们一般会在列表中的最后一列给加上操作功能,一般的操作功能是修改和删除,这个操作我们可以通过a标签来实现其功能. <a class="pn-opt" href=&quo ...
- GitHub的注册与使用
1. 注册账号: 地址: https://github.com/输入账号.邮箱.密码,然后点击注册按钮. 2. 初始设置 注册完成后,选择Free免费账号完成设置 3.验证账号 新建一个仓库 发现邮箱 ...
- ASP.NET 自定义服务器控件
文章内容 本文通过创建一个最简单的服务器控件,演示开发服务器端控件的流程. 文章内容整理自MSDN的编程指南,原文地址在文章末尾的资源中. 本文创建一个简单的服务器控件,名为 RedLabel. ...
- 文件下载工具类 DownLoadUtil 实战
package com.cloud.mina.util; import java.io.File; import java.io.FileInputStream; import java.io.IOE ...
- 使用Redis管道提升性能
首发于 樊浩柏科学院 Redis 的 管道 (pipelining)是用来打包多条无关命令批量执行,以减少多个命令分别执行带来的网络交互时间.在一些批量操作数据的场景,使用管道可以显著提升 Redis ...
- Python数据分析与展示[第三周]（pandas简介与数据创建）
第三周的课程pandas 分析数据 http://pandas.pydata.org import pandas as pd 常与numpy matplotlib 一块定义 d=pd.Series(r ...
- Leetcode696.Count Binary Substrings计算二进制字串
给定一个字符串 s,计算具有相同数量0和1的非空(连续)子字符串的数量,并且这些子字符串中的所有0和所有1都是组合在一起的. 重复出现的子串要计算它们出现的次数. 示例 1 : 输入: "0 ...
- could not insert: [com.trs.om.bean.UserLog] The user specified as a definer ('root'@'127.0.0.1') does not exist
2019-07-01 11:24:09,315 [http-8080-24] org.hibernate.util.JDBCExceptionReporter logExceptionsWARN: S ...
- 阿里云容器Kubernetes监控(九) - Kubernetes事件离线工具kube-eventer正式开源
前言 监控是保障系统稳定性的重要组成部分,在Kubernetes开源生态中,资源类的监控工具与组件百花齐放.除了社区自己孵化的metrics-server,还有从CNCF毕业的Prometheus等等 ...
- Hibernate 标签： hibernate数据库 2017-01-15 22:03 462人阅读 评论(24)
什么是hibernate? Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hibernat ...