在JS中如何實現(xiàn)多物體運動（詳細(xì)教程）

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 19:38:42

在JS中如何實現(xiàn)多物體運動（詳細(xì)教程）

在JS中如何實現(xiàn)多物體運動（詳細(xì)教程）:這篇文章主要介紹了JS實現(xiàn)多物體運動的方法,結(jié)合實例形式較為詳細(xì)的分析了javascript實現(xiàn)多物體運動的原理與相關(guān)操作技巧,需要的朋友可以參考下本文實例分析了JS實現(xiàn)多物體運動的方法。分享給大家供大家參考，具體如下：基本步驟1.通過getElementsB

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀在JS中如何實現(xiàn)多物體運動（詳細(xì)教程）:這篇文章主要介紹了JS實現(xiàn)多物體運動的方法,結(jié)合實例形式較為詳細(xì)的分析了javascript實現(xiàn)多物體運動的原理與相關(guān)操作技巧,需要的朋友可以參考下本文實例分析了JS實現(xiàn)多物體運動的方法。分享給大家供大家參考，具體如下：基本步驟1.通過getElementsB

這篇文章主要介紹了JS實現(xiàn)多物體運動的方法,結(jié)合實例形式較為詳細(xì)的分析了javascript實現(xiàn)多物體運動的原理與相關(guān)操作技巧,需要的朋友可以參考下

本文實例分析了JS實現(xiàn)多物體運動的方法。分享給大家供大家參考，具體如下：

基本步驟

1.通過getElementsByTagName獲取到要做多物體運動的元素
2.然后for循環(huán)遍歷元素，添加事件
3.定義startMove函數(shù)，需要兩個參數(shù)，當(dāng)前“做運動”的元素，和目標(biāo)值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個參數(shù)
 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>

問題：

當(dāng)移入移出速度比較快的時候，就會出現(xiàn)有的li回不到原來的樣子，卡在半路了；這是因為所有的li公用了一個定時器造成的；

當(dāng)鼠標(biāo)移入第一個li時，調(diào)用startMove開啟一個定時器；鼠標(biāo)移除li時，也需要開啟一個定時器讓li回到原來的位置，li走到半路上，我們移入第二個li，首先會清除定時器，這時候第一個li就卡到半路了。

解決這個問題：讓每個li擁有自己的timer去控制他們的變化，在for循環(huán)的時候，給每個里定義自己的一個timer

liTags[i].timer = null;// 給每個li都添加一個timer

接著在starMove里面每次用的定時器都是當(dāng)前l(fā)i 自己的，就不會互相干擾了。

這里由之前的timer變成了obj.timer (當(dāng)前對象自己的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>

上面是我整理給大家的，希望今后會對大家有幫助。

相關(guān)文章：

在vue中將對象新增的屬性添加到檢測序列的方法有哪些？

在jQuery中實現(xiàn)碰到邊緣反彈的動畫效果該如何做？

在vue cli webpack中如何使用sass（詳細(xì)教程）

在jQuery中如何改變P標(biāo)簽文本值

通過在js動態(tài)中創(chuàng)建標(biāo)簽,并設(shè)置屬性方法（詳細(xì)教程）

在jQuery中實現(xiàn)標(biāo)簽子元素的添加和賦值方法

在JS中常用的消息框如何實現(xiàn)？

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com