js做动画

最新推荐文章于 2024-08-31 23:42:40 发布

Yq-J

最新推荐文章于 2024-08-31 23:42:40 发布

阅读量645

点赞数 2

分类专栏： js 文章标签： js 动画导航 CSS

本文链接：https://blog.csdn.net/qq_40825178/article/details/84727880

版权

本文介绍了如何使用原生JavaScript创建动画，重点讲述了通过setTimeOut和setInterval函数来实现动画效果，特别是对于导航菜单下拉时的动画处理。通过改变元素的透明度实现渐变动画，并探讨了闭包和循环执行的原理。

摘要由CSDN通过智能技术生成

原生js动画利用js代码，将动画一步以函数的方式写出来，可以实现多种动画样式，而且可以自己做兼容性处理，自己设立每一步的动画效果，并且能够完成比较复杂的效果，但是代码量很大。如下面的例子：需要自己定义所有的动态函数，并进行计算、判断和处理

<div id="odiv" class="odiv">

     <div id="sdiv" class="sdiv">

     </div>

</div>



<script language="javascript">

window.onload = function(){

     var odiv = document.getElementById('odiv');

     odiv.onmouseover = function(){

      startMover(0);

 }

 odiv.onmouseout = function(){

      startMover(-200);

 }

}

var timer = null;

function startMover(a){//速度和目标值

     clearInterval(timer);//执行当前动画同时清除之前的动画

     var odiv = document.getElementById('odiv');

 timer = setInterval(function(){

     var speed = (a-odiv.offsetLeft)/10;//缓冲动画的速度参数变化值

 //如果速度是大于0，说明是向右走，那么就向上取整

     speed = speed>0?Math.ceil(speed):Math.floor(speed);

 //Math.floor();向下取整

     if(odiv.offsetLeft == a){

      clearInterval(timer);

     }

 else{

      odiv.style.left = odiv.offsetLeft+speed+'px';

  }

 },30);

}

</script>

为了做好导航菜单，有时候需要在菜单下拉的时候实现动画效果，所以这几天就研究了研究如何用js实现动画效果，实现动画核心要用到两个函数，一个是setTimeOut,另一个是setInterval.

下边我就简单说一下过程和原理。

第一步：实现一个匿名函数并能自己执行。