cari

Rumah  >  Artikel  >  hujung hadapan web  >  JS中链式运动（详细教程）

JS中链式运动（详细教程）

亚连
亚连asal
2018-06-09 16:15:391547semak imbas

这篇文章主要介绍了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组件

Atas ialah kandungan terperinci JS中链式运动（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS运动特效Artikel seterusnya：在Bootstrap中使用popover如何实现显示隐藏功能

Artikel berkaitan

Lihat lagi