• JS实现侧边栏分享


     <!DOCTYPE html>
    
    <html>
    <head>
    <title>侧边栏分享</title>
    <style type="text/css">
    *{margin: 0px;padding: 0px;}
    #div1{width: 120px;height: 200px;background: red;position: absolute;left: -120px;}
    #span1{width: 20px;height: 60px;background: blue;position: absolute;top: 70px;right: -20px;line-height: 20px;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
    var oDiv = document.getElementById('div1');
    oDiv.onmouseover=function(){
    startMove(0);
    }
    oDiv.onmouseout=function(){
    startMove(-120);
    }
    }
    var timer=null;
    function startMove(iTarget){
    var oDiv = document.getElementById('div1');
    clearInterval(timer);
    timer=setInterval(function(){
    var speed=0;
    if (iTarget<0) {
    speed=-10;
    }else{
    speed=10;
    }
    if (oDiv.offsetLeft==iTarget) {
    clearInterval(timer);
    }else{
    oDiv.style.left=oDiv.offsetLeft+speed+'px';
    }
    },30)
    };
    </script>
    </head>
    <body>
    <div id="div1">
    <span id="span1">
    分享到
    </span>
    <p>1111</p>
    <p>2222</p>
    <p>3333</p>
    </div>
    </body>
    </html>
  • 相关阅读:
    泛型
    a版本冲刺第四天
    a版本冲刺第三天
    a版本冲刺第二天
    a版本冲刺第一天
    第四次团队作业——系统设计
    团队项目——需求规格说明书
    第二次团队作业——预则立&&他山之石
    团队项目选题报告
    Alpha 冲刺4
  • 原文地址:https://www.cnblogs.com/xuedong/p/5028579.html
Copyright © 2020-2023  润新知