JS小练习之实现网站的侧边栏分享操作

最新推荐文章于 2023-12-23 23:46:51 发布

曲奇小姐

最新推荐文章于 2023-12-23 23:46:51 发布

阅读量503

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_41586886/article/details/80676972

版权

Javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>运动框架</title>
    <style>
    /* #div1{
      width: 200px;
      height: 200px;
      background: yellow;
      position: absolute;
      top: 50px;
      left:0px;
    } */

    #div1{
      width: 200px;
      height: 400px;
      position: absolute;
      top:100px;
      left:-200px;
      background: pink;

    }
    #div2{
      width: 30px;
      height: 80px;
      background: green;
      position: absolute;
      left: 200px;
      /* right:-20px; */
      top:160px;
    }
    </style>
    <script type="text/javascript">

    //关于运动框架的一般形式
    // var timer=null;
    // function statMove(){
    //   var oDiv=document.getElementById('div1');
    //   var speed=10;
    //
    //   clearInterval(timer);  //在运动开始时，关闭已有定时器
    //   timer=setInterval(function(){
    //     if(oDiv.offsetLeft>=1000){
    //       clearInterval(timer);
    //     }
    //     else{
    //       oDiv.style.left=oDiv.offsetLeft+speed+'px';
    //     }
    //   },30);
    // }

    //一个运动框架的例子，一般网站的侧边栏的分享
    window.οnlοad=function(){
      var oDiv=document.getElementById('div1');
      oDiv.οnmοuseοver=function(){  //当鼠标移入分享区域
        startMove(0); //待分享的内容滑出，0表示分享区域的目标位置
      }
      oDiv.οnmοuseοut=function(){//当鼠标移出分享区域
        startMove(-200);//待分享的内容滑入
      }
    }
    var timer=null;
    var speed=0;
    var iTarget=0;
    function startMove(iTarget){
      var oDiv=document.getElementById('div1');
      if(oDiv.offsetLeft>iTarget){  //判断一下运动方向
        speed=-10;
      }
      else{
        speed=10;
      }
      clearInterval(timer);
        timer=setInterval(function(){
          if(oDiv.offsetLeft==iTarget){
            clearInterval(timer);
          }
          else{
              oDiv.style.left=oDiv.offsetLeft+speed+'px';
          }
        },30);
  };
    </script>
  </head>
  <body>
    <!-- <div id='div1'></div>
    <button type="button" name="button" id='btn' οnclick='statMove()'>点我就动</button> -->

    <div id='div1'>
      <div id='div2'>分享到</div>
    </div>
  </body>
</html>