                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫效果

完成（緩沖運(yùn)動(dòng)動(dòng)畫）

<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title></title>

??? <style type="text/css">
??????? *{
??????????? margin:0;
??????????? padding:0;
??????? }
??????? .frameworks{
??????????? position:fixed;
??????????? top:30%;
??????? }

??????? .frameworks span{
??????????? width:20px;
??????????? height:50px;
??????????? position:absolute;
??????????? border:1px #8e8e8e solid;
??????????? color:#fff;
??????????? background-color: #0088bb;
??????????? left: 200px;
??????????? top: 75px;

??????? }
??????? .content{
??????????? width:200px;
??????????? height:200px;
??????????? background-color: #8e8e8e;
??????????? position:relative;
??????????? left:-200px;

??????? }
??? </style>

</head>
<body>
<div>

??? <div id="div1">
??????? <span>分享</span>
??? </div>
</div>

</body>
<script type="text/javascript">
??? 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 () {//這段代碼定義了速度變化的函數(shù)
???????? var speed=(iTarget-odiv.offsetLeft)/20;/*速度和距離成正比*/
??????????? speed = speed>0?Math.ceil(speed)/*向上取整*/:Math.floor(speed);/*向下取整*/
??????????? if(odiv.offsetLeft == iTarget){
??????????????? clearInterval(timer)
??????????? }else {
??????????????? odiv.style.left = odiv.offsetLeft + speed + 'px'
??????????? }
??????? }, 20)

??? }

</script>
</html>