js动画效果练习（1）

 

<div id="div1">
    <span id="share">分享</span>
</div>

 

 

1.速度动画

<style>
    #div1{
        width:200px;
        height:200px;
        background-color:red;
        position: relative;
        left: -200px;
        top:0;
    }
    #share{
        width:20px;;
        height:50px;
        background-color: blue;
        color: white;
        position: absolute;
        left: 200px;
        top:75px;
    }
</style>
<script>
    window.onload=function(){
        var oDiv=document.getElementById("div1");
        oDiv.onmouseover=function(){
            startMove(0);
        };
        oDiv.onmouseout=function(){
            startMove(-200);
        }
    };
    var timer=null;
    function startMove(iTarget){
        clearInterval(timer);
        var oDiv=document.getElementById("div1");
        timer=setInterval(function(){
            var speed=0;
            if(oDiv.offsetLeft<iTarget){
                speed=2;
            }else{
                speed=-2;
            }
            if(oDiv.offsetLeft==iTarget){
                clearInterval(timer);
            }else{
                oDiv.style.left=oDiv.offsetLeft + speed + 'px';
            }
        },30);
    }
</script>

 

效果如下：

初始：，鼠标移入后开始向右滑动：，鼠标移出后开始向左滑动隐藏：

 

 

 

 

来源：https://www.cnblogs.com/Fourteen-Y/p/11903772.html