js动画实现侧边栏分享 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分享</title>
<style>
body,div,span{
    margin:0;
    padding:0;
    }
.div{
    background:red;
    width:200px;
    height:200px;
    position:relative;
    left:-200px;
    top:10px;
    
    }
.a{
    padding:2px;
    width:20px;
    height:50px;
    position:absolute;
    left:200px;
    top:20px;
    background:blue;
    color:white;
    text-decoration:none;
    }
</style>
<script>
window.onload = function (){
    var div = document.getElementById('div');
    div.onmouseover = function (){
        display(10,0);
        }
    div.onmouseout = function (){
        display(-10,-200);
        }
    }
    var stop = null;
function display(speed, targetLeft){
    clearInterval(stop);
    var div = document.getElementById('div');
    stop = setInterval(function(){
        if(div.offsetLeft == targetLeft){
            clearInterval(stop);
        }
        else{
            div.style.left = div.offsetLeft + speed + 'px';
            }
        }, 30);
    }
</script>
</head>

<body>
<div class="div" id="div">
<a href="#" class="a" id="a">分享</a>
</div>

</body>
</html>

动画总结：写js函数时，如果两个函数差不多，可以把相同的地方提出来当参数穿进去。对于计时器要想到清空它。

posted @ 2015-12-28 21:07  纸鸢&红豆·绿豆  阅读(319)  评论(0)  编辑  收藏  举报