js动画效果之速度动画

最新推荐文章于 2021-06-07 17:42:41 发布

伊人笑桃花酒

最新推荐文章于 2021-06-07 17:42:41 发布

阅读量1.4k

点赞数

分类专栏： js-Ldemo 文章标签：动画 javascript

本文链接：https://blog.csdn.net/T_tq_bnsg_bs_ll/article/details/69942558

版权

js-Ldemo 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

此案例实现的是侧边栏的滑入与滑出，主要用定时器来实现物体滑动时速度的控制，从而实现滑入滑出效果，下面是效果图：
这里写图片描述
下面是实现的js代码：

window.onload=function(){
                var odiv=document.getElementById("mydiv");
                odiv.onmouseover=function(){
                    startMove(0);
                }
                odiv.onmouseout=function(){
                    startMove(-200);
                }
            }
            var timer=null;
            function startMove(iTarget){
                clearInterval(timer);
                var odiv=document.getElementById("mydiv");
                timer=setInterval(function(){
                    var speed=0;
                    if(odiv.offsetLeft>iTarget){
                        speed=-10;
                    }else{
                        speed=10;
                    }
                    if(odiv.offsetLeft==iTarget){
                        clearInterval(timer);
                    }else{                      
                        odiv.style.left=odiv.offsetLeft+speed+"px";
                    }
                },30);
            }