這篇文章主要介紹了JS實現多物體運動的方法,結合實例形式較為詳細的分析了javascript實現多物體運動的原理與相關操作技巧,需要的朋友可以參考下
本文實例分析了JS實現多物體運動的方法。分享給大家供大家參考，具體如下：
基本步驟
#1.透過getElementsByTagName取得到要做多物體運動的元素
2.然後for循環遍歷元素，加入事件
3.定義startMove函數，需要兩個參數，當前「做運動」的元素，和目標值target
注意問題： 在多物體運動中，所有的東西不能公用；
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li'); // 第一步
for(var i=0;i<liTags.length;i++){ // 第二步
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
var timer = null;
function startMove(obj,iTarget) { // 第三步，2个参数
clearInterval(timer);
timer = setInterval(function () {
var iSpeed = (iTarget - obj.offsetWidth)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
if(obj.offsetWidth == iTarget){
clearInterval(timer);
}else{
obj.style.width = obj.offsetWidth+iSpeed+'px';
}
},30);
}
</script>登入後複製
#問題：
當移入移出速度比較快的時候，就會出現有的li回不到原來的樣子，卡在半路了；這是因為所有的li公用了一個定時器造成的；
##當滑鼠移入第一個li時，呼叫startMove開啟一個定時器；滑鼠移除li時，也需要開啟一個定時器讓li回到原來的位置，li走到半路上，我們移入第二個li，首先會清除定時器，這時候第一個li就卡到半路了。
解決這個問題：讓每個li擁有自己的timer去控制他們的變化，在for迴圈的時候，給每個裡定義自己的一個timer
liTags[i].timer = null;// 给每个li都添加一个timer
登入後複製
接著在starMove裡面每次用的計時器都是當前li 自己的，就不會互相干擾了。
這裡由之前的timer變成了
obj.timer (目前物件自己的timer)；到這裡就沒問題了。
完整程式碼如下：
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
登入後複製
加點樣式：
<style>
ul{list-style: none;}
ul li{
margin: 10px;
width: 200px;height: 50px;
background: lightblue;
}
</style>登入後複製
完整js程式碼
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 给每个li都添加一个timer
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
function startMove(obj,iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var iSpeed = (iTarget - obj.offsetWidth)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(obj.offsetWidth == iTarget){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+iSpeed+'px';
}
},30);
}
</script>登入後複製
接著在看一個例子：多物體運動-改變透明度
<script>
window.onload = function () {
var aImgs = document.getElementsByTagName('img');
for(var i=0;i<aImgs.length;i++){
aImgs[i].timer = null;
aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
aImgs[i].onmouseover = function () {
startMove(this,30);
}
aImgs[i].onmouseout = function () {
startMove(this,100);
}
}
}
// var alpha = 100; 这里alpha在多物体运动里 不能公用
function startMove(obj,iTarget) {
clearInterval(obj.timer);
var iSpeed = (iTarget - obj.alpha)/10;
iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
obj.timer = setInterval(function(){
if(obj.alpha == iTarget){
clearInterval(obj.timer);
}else{
obj.alpha += iSpeed;
obj.style.opacity =obj.alpha/100;
obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
}
},30);
}
</script>登入後複製
上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
在vue中將物件新增的屬性加入檢測序列的方法有哪些？
在jQuery中實現碰到邊緣反彈的動畫效果該如何做？
在vue cli webpack中如何使用sass（詳細教學）
在jQuery如何改變P標籤文字值
#透過在js動態中建立標籤,並設定屬性方法（詳細教學）
#在jQuery中實作標籤子元素的新增與賦值方法
在JS中常用的訊息框如何實作？
以上是在JS中如何實現多物體運動（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
