标签：function 动画 oDiv color 练习 js var div1 200px

<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>

效果如下：

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

标签：function,动画,oDiv,color,练习,js,var,div1,200px
来源： https://www.cnblogs.com/Fourteen-Y/p/11903772.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。