首頁 >web前端 >js教程 >JS中鍊式運動（詳細教學）

JS中鍊式運動（詳細教學）

亚连原創: 2018-06-09 16:15:391580瀏覽

這篇文章主要介紹了JS運動特效之鍊式運動,結合實例形式分析了javascript鍊式運動的原理與具體實現技巧,需要的朋友可以參考下

本文實例講述了JS運動特效之鍊式運動。分享給大家供大家參考，具體如下：

接著前面一篇《JS運動特效之任意值添加運動的方法》繼續折騰

鍊式運動：一個運動接著一個運動。例如：滑鼠移入p先讓寬變大，接著在讓高變大，接著在讓透明度變化等等一系列運動連著做。廢話不多說，上栗子！！

當滑鼠移入p的時候，p先變寬，在變高，然後改變透明度；移出又逐次恢復到原樣；

實現鏈式運動，需要對上一篇的startMove() 函數繼續做改進

function startMove(obj,attr,iTarget,fn) 多傳入一個fn參數，表示當一個運動結束之後，繼續下一個運動，當然也需要判斷，如果有下一個運動，就執行下一個運動，如果沒有就繼續向下執行

if(fn){
  fn();
}

完整測試程式碼：

HTML部分：

<body>
<p id="p1"></p>
</body>

css部分：

<style>
  #p1{
   width: 200px;height: 200px;
   background: green;
  }
</style>

js部分：

<script>
  window.onload = function(){
   var op = document.getElementById(&#39;p1&#39;);
   op.onmouseover = function () {
    startMove(op,&#39;width&#39;,300,function () {
     startMove(op,&#39;height&#39;,300, function () {
      startMove(op,&#39;opacity&#39;,30);
     });
    });
   }
   op.onmouseout = function () {
    startMove(op,&#39;opacity&#39;,100, function () {
     startMove(op,&#39;height&#39;,200, function () {
      startMove(op,&#39;width&#39;,200);
     });
    });
   }
  }
  function getStyle(obj,attr){
   return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
  }
  function startMove(obj,attr,iTarget,fn) {//fn：执行下一个运动的函数
   clearInterval(obj.timer);
   obj.timer = setInterval(function () {
    var objAttr = 0;
    if(attr == "opacity"){
     objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
    }else{
     objAttr = parseInt(getStyle(obj,attr));
    }
    var iSpeed = (iTarget -objAttr)/10;
    iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
    if(objAttr == iTarget){
     clearInterval(obj.timer);
     if(fn){// 如果传了 “下一个运动的函数” 就执行
      fn();
     }
    }else{
     if(attr == "opacity"){
      obj.style.filter = &#39;alpha(opacity:&#39;+(objAttr+iSpeed)+&#39;)&#39;;
      obj.style.opacity = (objAttr+iSpeed)/100;
     }else{
      obj.style[attr] = objAttr+iSpeed+&#39;px&#39;;
     }
    }
   },30);
  }
</script>

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

在vue-cli專案中proxyTable跨域問題

##express建置查詢伺服器

使用js自訂trim函數刪除兩端空格

JavaScript運行原理

詳解講解使用jest測試react native組件

以上是JS中鍊式運動（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

看更多