码迷,mamicode.com
首页 > Web开发 > 详细

JS实现边栏弹出动画

时间:2017-05-15 13:10:32      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:abs   微软   get   style   16px   java   etl   center   off   

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS实现边栏弹出动画</title>
  <style type="text/css">
  *{margin:0;padding:0;}
  #box{width:200px;height:200px;background-color:#ccc;position:absolute;left:-200px;top:500px;}
  #share{display:block;font-size:16px;line-height:30px;font-family:微软雅黑;text-align:center;width:24px;height:60px;background-color:orange;position:absolute;left:200px;top:70px;}
  </style>
  <script type="text/javascript">
    window.onload=function(){
      var box=document.getElementById("box");
      box.onmouseover = function(){
        move(10)
      };
      box.onmouseout = function(){
        move(-10)
      };
    }

    var timer;

    function move(spd){
      clearInterval(timer);
      var box = document.getElementById(box);
      timer = setInterval(function(){
        console.log(box.offsetLeft);
        if(box.offsetLeft == -100+10*spd){
          clearInterval(timer);
        }else{
          box.style.left=box.offsetLeft+spd+px;
        }
      },30);
    }
  </script>
</head>
<body>
  <div id="box" style=""><span id=‘share‘>分享</span></div>
</body>
</html>

遇到的问题及注意事项:

1、offset属性的值是数字,没有‘px’单位。

2、element.style只能获取内联式CSS的属性及用element.style.*=‘ ’设置的属性。非内联式CSS的属性使用element.getAttribute()方法获取。

JS实现边栏弹出动画

标签:abs   微软   get   style   16px   java   etl   center   off   

原文地址:http://www.cnblogs.com/oliverliu/p/6855766.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!