侧边隐藏分享栏的简单Demo

作者: 做有趣的恶魔 | 来源:发表于2017-04-22 19:47 被阅读69次

侧边隐藏分享栏的简单Demo
iOS QQ侧边栏的实现
仿QQ侧边栏
xcode常用快捷键
JS实现侧边栏显示隐藏
个人博客—一键分享侧边栏
关于侧边栏定点隐藏问题
设置 Ubuntu 侧边栏
带 TOC 侧边栏的 MacDown.app
iframe监听鼠标点击事件

侧边隐藏分享栏

一、Html布局

  <body>
  <aside id="menu">
    <ul>
      <li>QQ</li>
      <li>wechat</li>
      <li>weibo</li>
    </ul>
    <span id="share">分享</span>
  </aside>
</body>

二、Css样式

  <style>
    body{
      margin:0;
      padding: 0;
    }
    ul{
      margin:0;
    }
    ul li{
      padding-top:20px;
    }
    #menu{
      width: 200px;
      height:200px;
      background:red;
      position:relative;
      left:-200px;
      top:0;
    }
    #menu span{
      width:20px;
      height: 50px;
      background-color: blue;
      position: absolute;
      left:200px;
      top: 75px;
    }
  </style>

三、Js部分

speed一定的匀速运动

  <script>
    window.onload = function(){
      var oDiv = document.getElementById("menu");
      oDiv.onmouseover = function(){
        startMove(0);
      }
      oDiv.onmouseout = function(){
        startMove(-200);
      }
    }
    var timer = null;
    //定义定时器
    startMove = function(iTarget){
      //目标值ITarget(与隐藏的区域宽度相同)
      clearInterval(timer);
      //开启定时器前先关闭所有定时器
      var oDiv = document.getElementById("menu");
      timer = setInterval(function(){
        var speed = 0;
        //移入移出速度
        if(oDiv.offsetLeft > iTarget){
          //这里为了方便直接使用offsetWidth属性，但给div加入border margin等会有bug
          //应该用 currentStyle 或 getComputedStytle获取样式
          speed = -10;
        }else{
          speed = 10;
        }
        if(oDiv.offsetLeft == iTarget){
          clearInterval(timer);
        }else{
          oDiv.style.left = oDiv.offsetLeft + speed + "px";
        }
      },30)
    }
  </script>

speed改变的缓冲运动

  <script>
    window.onload = function(){
      var oDiv = document.getElementById("menu");
      oDiv.onmouseover = function(){
        startMove(0);
      }
      oDiv.onmouseout = function(){
        startMove(-200);
      }
    }
    var timer = null;
    //定义定时器
    startMove = function(iTarget){
      //目标值ITarget(与隐藏的区域宽度相同)
      clearInterval(timer);
      //开启定时器前先关闭所有定时器
      var oDiv = document.getElementById("menu");
      timer = setInterval(function(){
        var speed = (iTarget - oDiv.offsetLeft )/20;
        //越靠近目标值速度越小
        speed = speed > 0?Math.ceil(speed):Math.floor(speed);//缓冲运动所必须   
        //向右移动速度为正数，向左为负数
        //将speed取整是为了避免后面设置oDiv.style.left 有小数部分，显示不完全
        if(oDiv.offsetLeft == iTarget){
          clearInterval(timer);
        }else{
          oDiv.style.left = oDiv.offsetLeft + speed + "px";
        }
      },30)
    }
  </script>