js实现div的碰壁反弹效果

需求：写一个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(){// 获取元素当前leftvar  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>

转载于:https://www.cnblogs.com/sandraryan/p/11377552.html

js实现div的碰壁反弹效果相关推荐

js 小球碰壁反弹and小球碰撞
好像好几天没有更博了呢,最近有点变懒了,这样不好,不好~~我们要做热爱学习的好孩子,嘻嘻,今天下午补上... 我们在学习js的时候,一个很经典的案例就是小球的碰壁反弹效果啦~简单的小球碰壁效果可以慢慢 ...
js运动小球碰壁反弹
js运动小球碰壁反弹 1.触碰窗口壁沿反弹,同时改变颜色 <!DOCTYPE html> <html lang="en"><head><m ...
HTML选中时闪动效果代码,JS实现点击文字对应DIV层不停闪动效果的方法
本文实例讲述了JS实现点击文字对应DIV层不停闪动效果的方法.分享给大家供大家参考.具体分析如下: 在很多娱乐网站我们经常看到这种效果,点击网页中某个方块中的文字,然后整个方块就不停的闪动起来,很不错 ...
小球碰壁反弹加分_用Java实现小球碰壁反弹的简单实例(算法十分简单)
用Java实现小球碰壁反弹的简单实例(算法十分简单) 核心代码如下: if(addX){ x+=3; }else{ x-=3; } if(addY){ y+=6; }else{ y-=6; } if( ...
JavaScript 实现碰壁反弹
前言:碰壁反弹所要的效果就是一个小块在一个大的DIV里做X轴和Y轴的匀速运动,当碰到大DIV的边框时,反方向移动. 正文: 步骤1:首先来分析,怎么样才能使得小球动起来. a.给小球一个绝对定位abs ...
JS实现小球碰撞边界反弹-点击消失（详细解析实现思路）
本篇文章给大家带来的是原生JS实现小球碰到边界就反弹,点击小球时小球被会销毁,并重新创建一个小球,让小球的数量一直保持在初始的数量,按照思路按步骤进行讲解,只需要源码的小伙伴可以定位到文本末尾直接复制 ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
js实现简单的循环打字效果(思路分享)
1.初始化"打字创建"属性代码类似于这样: <div id="demo"></div> <script>var typin ...
div上下展开收缩 html,js实现div层缓慢收缩与展开的方法
本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收 ...

js实现div的碰壁反弹效果

js实现div的碰壁反弹效果相关推荐

最新文章

热门文章