点滴积累【JS】---JS小功能（JS实现隐藏显示侧边栏，也就是分享栏的隐藏显示）

效果：

思路：

首先，利用计时器setInterval实现DIV的隐藏显示功能，然后在进行一个判断，之后在把要移动的相应距离进行一个参数传递，再根据参数判断出移动的方向也就是offsetLeft移动的方向，是正或者是负。最后利用onmouseover和onmouseout，实现DIV的事件。

代码：

 <head runat="server">
     <title></title>
     <style type="text/css">
         div
         {
             width: 200px;
             height: 300px;
             background: #FF0000;
             position: absolute;
             left: -200px;
         }
         div span
         {
             width: 30px;
             height: 90px;
             background: #00FF00;
             position: absolute;
             right: -30px;
             top: 100px;
             text-align: center;
         }
     </style>
     <script type="text/javascript">
         window.onload = function () {
             var oDiv1 = document.getElementById('div1');
             oDiv1.onmouseover = function () {
                 shareMove(0);
             }
             oDiv1.onmouseout = function () {
                 shareMove(-200);
             }
         };
         var timer = null;
         function shareMove(end) {
             var oDiv1 = document.getElementById('div1');
             var speed = 0;
             if (oDiv1.offsetLeft < end) {       //根据DIV的offsetLeft距离判断DIV所要走的正负方向
                 speed = 10;
             }
             else {
                 speed = -10;
             }
             clearInterval(timer);           //在一个setInterval开始之前都要先清除之前的setInterval
             timer = setInterval(function () {
                 if (oDiv1.offsetLeft == end) {      //根据参数判断DIV要走的距离
                     clearInterval(timer);
                 }
                 else {
                     oDiv1.style.left = oDiv1.offsetLeft + speed + 'px'      //DIV要走的距离
                 }
             }, 30);
         }
     </script>
 </head>
 <body>
     <div id="div1">
         <span>青苹果分享</span>
     </div>
 </body>