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函数时，如果两个函数差不多，可以把相同的地方提出来当参数穿进去。对于计时器要想到清空它。

努力吧，为了媳妇儿，为了家。。。

相关阅读:
基于ADO的远程Oracle连接
oracle中的定时任务
关于C++ const 变量
堆排序和选择排序
插入排序
多线程的两种启动方式
多尺度变换去噪的阈值选择
jstree
JS中call、apply、bind使用指南，带部分原理。
六. JavaScript时间日期格式化

原文地址：https://www.cnblogs.com/jlj9520/p/5083749.html