为了账号安全,请及时绑定邮箱和手机立即绑定

速度动画源码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>速度动画</title>
        <style>
            body,div,span{
                margin: 0;padding: 0;
            }
            #div1{
                width: 200px;
                height: 200px;
                background: red;
                position: relative;
                left: -200px;
                top: 0;
            }
            #div1 span{
                width: 20px;height: 50px;
                background: blue;
                position: absolute;
                left: 200px;
                top: 75px;
            }
        </style>
        
    </head>
    <body>
        <div id="div1">
            <span id="share">分享</span>
        </div>
    </body>
</html>


正在回答

1 回答

var oDiv = $('.div1')[0],

    timer = null;

    oDiv.onmouseover = function(){

    startMove(0);

    }

    oDiv.onmouseout = function(){

    startMove(-200);

    }

    function startMove(iTagget){

    clearInterval(timer);

    timer =setInterval(function(){

    var speed =(iTagget-oDiv.offsetLeft)/20;

    speed = speed>0? Math.ceil(speed):Math.floor(speed);

    if(oDiv.offsetLeft == iTagget){

    clearInterval(timer);

    }else{

    oDiv.style.left = oDiv.offsetLeft + speed + 'px';

    }

    },1)

    }


0 回复 有任何疑惑可以回复我~
#1

香宝的夫差 提问者

我没要速度动画的代码,看见别人都在找源码,就贴了
2017-07-13 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113925    人
  • 解答问题       1443    个

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

进入课程

速度动画源码

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信