javascript动画效果_js动画效果animate

全栈程序员站长

发布于 2022-11-04 17:24:16

16.7K0

发布于 2022-11-04 17:24:16

文章被收录于专栏：全栈程序员必看

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

下面是实现的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);
            }

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/181752.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年10月15日，如有侵权请联系 cloudcommunity@tencent.com 删除

https