首页手记 JS动画------缓冲动画

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

标签：

Html/CSS JavaScript

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

点击查看更多内容