JS运动效果的碰壁运动之实现匀速碰壁(JS漂浮广告实现思路)
碰撞运动可能是运动系列里面比较复杂的运动了。
匀速碰壁
碰壁是一种常见的碰撞形式，匀速碰壁是最简单的碰撞运动
假设一个密闭空间内一个弹性小球，小球有一个随机方向随机大小的初始速度。当小球碰壁时，速度不损失，而是做反向的匀速运动
用法常见的得最多的是飘浮广告样式了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="test" style="height: 100px;width: 100px;background:lightblue;position:absolute;top:60px;left:20px;border-radius:50%;"></div> <button id="btn1">开始运动</button> <button id="btn2">停止运动</button> <span>点“开始运动”小球开始运动</span> <div id="result"></div> <script> var timer,i=0; //声明得分 var key = 0; var arr = ['orange','lightgreen','lightcoyal','pink','lightcyan','lightgray','lightseagreen','lightsteelblue']; function changeColor(){ i++; if(i == arr.length){ i = 0; } test.style.background = arr[i]; } document.onmousemove = function(){ return false; } test.onclick = function(){ //当小球开始运动后，开始记分 if(test.timer){ result.innerHTML = '当前得分为:' + ++key + '分' } changeColor(); } btn1.onclick = function(){ result.innerHTML = '' //将分数清零 key = 0; collisionMove({ obj:test }) clearInterval(timer); timer = setInterval(function(){ changeColor(); },500); } btn2.onclick = function(){ clearInterval(timer); clearInterval(test.timer); test.timer = 0; result.innerHTML = '你得到:' + key + '分，再接再厉！' } function getCSS(obj,style){ if(window.getComputedStyle){ return getComputedStyle(obj)[style]; } return obj.currentStyle[style]; } function collisionMove(json){ var obj = json.obj; var fn = json.fn; //声明x、y轴的当前值 var curX = parseFloat(getCSS(obj,'left')); var curY = parseFloat(getCSS(obj,'top')); //声明x、y轴的步长值 var stepX = json.stepX; var stepY = json.stepY; //步长值默认值为[-25,-20,-15,-10,-5,0,5,10,15,20]中的一个随机数 stepX = Number(stepX) || 5*Math.floor(Math.random() * 10 - 5); stepY = Number(stepY) || 5*Math.floor(Math.random() * 10 - 5); //声明x、y轴方向 var dirX = json.dirX; var dirY = json.dirY; dirX = stepX > 0 ? '+' : '-'; dirY = stepY > 0 ? '+' : '-'; //声明offset宽高 var offsetWidth = obj.offsetWidth; var offsetHeight = obj.offsetHeight; //声明元素活动区域宽高 var activeWidth = json.activeWidth; var activeHeight = json.activeHeight; //元素获取区域宽高默认值为可视区域宽高 activeWidth = Number(activeWidth) || document.documentElement.clientWidth; activeHeight = Number(activeHeight) || document.documentElement.clientHeight; //声明left、top样式值 var left; var top; //清除定时器 if(obj.timer){return;} //开启定时器 obj.timer = setInterval(function(){ //获取x、y轴的当前值 curX = parseFloat(getCSS(obj,'left')); curY = parseFloat(getCSS(obj,'top')); //更新left、top值 left = curX + stepX; top = curY + stepY; //右侧碰壁前一刻，步长大于剩余距离，且元素向右运动时 if((left > activeWidth - offsetWidth) && (dirX == '+')){ left = activeWidth - offsetWidth; } //左侧碰壁前一刻，步长大于剩余距离，且元素向左运动时 if((Math.abs(stepX) > curX) && (dirX == '-')){ left = curX; } //下侧碰壁前一刻，步长大于剩余距离，且元素向下运动时 if((top > activeHeight - offsetHeight) && (dirY == '+')){ top = activeHeight - offsetHeight; } //上侧碰壁前一刻，步长大于剩余距离，且元素向上运动时 if((Math.abs(stepY) > curY) && (dirY == '-')){ top = curY; } obj.style.left= left + 'px'; obj.style.top = top + 'px'; //左侧或右侧碰撞瞬间 if(left == activeWidth - offsetWidth || left == curX){ stepX = -stepX; } //上侧或下侧碰撞瞬间 if(top == activeHeight - offsetHeight || top == curY){ stepY = -stepY; } //更新运动方向 dirX = stepX > 0 ? '+' : '-'; dirY = stepY > 0 ? '+' : '-'; },20); } </script> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知