javascript动画效果_js动画效果animate

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

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

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