继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JS动画------缓冲动画

陈先森
关注TA
已关注
手记 14
粉丝 5
获赞 173
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS缓冲动画</title>
<style type="text/css">
/**写样式时一定要先清除网页默认的样式,否则动画效果不出现**/
*{
    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>
<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=(iTarget-oDiv.offsetLeft)/20;
        //如果速度>0也就是向右移动,目标值是0;如果速度<0也就是向左移动,目标值为-200
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        if(oDiv.offsetLeft==iTarget){
            clearInterval(timer);
        }else{
            oDiv.style.left=oDiv.offsetLeft+speed+'px';
        }
    },30);
}
</script>
</head>
<body>
    <div id="div1"><span>分享</span></div>
</body>
</html>
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP