首頁手記 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(1,0);
        };
        oDiv.onmouseout=function(){
            startMove(-1,-200);
        }
    };
var timer=null;
function startMove(speed,iTarget){
    var oDiv=document.getElementById('div1');
    clearInterval(timer);
    //设定计时器
    timer=setInterval(function(){
        if(oDiv.offsetLeft==iTarget){
            clearInterval(timer);
        }else{
                        ////offsetLeft当前值
            oDiv.style.left=oDiv.offsetLeft+speed+'px';
        }
    },30);
}
/**function stopMove(){
    var oDiv=document.getElementById('div1');
    clearInterval(timer);
    //设定计时器
    timer=setInterval(function(){
        if(oDiv.offsetLeft==-200){
            clearInterval(timer);
        }else{
            oDiv.style.left=oDiv.offsetLeft-1+'px';
        }
    },30);
}
**/
</script>
</head>
<body>
    <div id="div1"><span>分享</span></div>
</body>
</html>

點擊查看更多內容