用原生js完成鼠标点击显示滑入滑出效果

最近用原生js做项目练手，自己尝试做了下，可以直接复制代码看效果

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>滑入滑出</title>
 6     <style>
 7         #dv1 {
 8             height: 0px;
 9             overflow: hidden;
10         }
11 
12         #dv2 {
13             width: 200px;
14             height: 200px;
15             background: #ace;
16         }
17     </style>
18 </head>
19 <body>
20 <input type="button" id="btn2" value="点击滑出"/>
21 <input type="button" id="btn1" value="点击滑入"/>
22 <div id="dv1">
23     <div id="dv2"></div>
24 </div>
25 <script>
26     var dv = document.getElementById("dv1");
27     document.getElementById("btn1").onclick = function () {
28         animate(dv, "height", 0)
29     }
30     document.getElementById("btn2").onclick = function () {
31         animate(dv, "height", 200)
32     }
33 
34     //兼容代码：获取当前元素样式的值
35     function getStyle(element, attr) {
36         return getComputedStyle ? getComputedStyle(element, null)[attr] : element.currentStyle[attr];
37     }
38 
39     function animate(element, attr, target) {
40         clearInterval(element.timeId);
41         //不清理的话，每一次调用animate这个函数，就会产生一个定时器
42         element.timeId = setInterval(function () {
43             var current = parseInt(getStyle(element, attr));//返回值是元素样式的值，转换成整数进行下面的计算
44             var step = (target - current) / 10;
45             step = step > 0 ? Math.ceil(step) : Math.floor(step);
46             current += step;
47             element.style[attr] = current + "px";
48             if (current == target) {
49                 clearInterval(element.timeId);
50             }
51         }, 20)
52     }
53 </script>
54 </body>
55 </html>
View Code

 

先把html、css部分代码呈上来，我这里是用一个div包裹另一个div，并且最外层的div是设置高度为0的

 <style>
        #dv1 {
            height: 0px;
            overflow: hidden;
        }

        #dv2 {
            width: 200px;
            height: 200px;
            background: #ace;
        }
    </style>
<input type="button" id="btn2" value="点击滑出"/>
<input type="button" id="btn1" value="点击滑入"/>
<div id="dv1">
    <div id="dv2"></div>
</div>

 

先写一个兼容ie8的获取元素样式值的函数

 function getStyle(element, attr) {
        return getComputedStyle ? getComputedStyle(element, null)[attr] : element.currentStyle[attr];
    }

 

接着写一个变速动画函数

function animate(element, attr, target) {
        clearInterval(element.timeId);
      
        element.timeId = setInterval(function () {
            var current = parseInt(getStyle(element, attr));
            var step = (target - current) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            current += step;
            element.style[attr] = current + "px";
            if (current == target) {
                clearInterval(element.timeId);
            }
        }, 20)
    }

 

接着注册鼠标进入离开事件，改变第一个div的高度即可

 var dv = document.getElementById("dv1");
    document.getElementById("btn1").onclick = function () {
        animate(dv, "height", 0)
    }
    document.getElementById("btn2").onclick = function () {
        animate(dv, "height", 200)
    }

 

实际运用中，会因为隐藏的部分还是会占页面空间，导致鼠标移动到该部分的时候，不能显示完全，所以可以让该部分脱离文档流，绝对定位，并且设置z-index，比后面的内容数值高一些，就不会影响了~

如果有什么不对谢谢指正~有好的方法欢迎提出~

posted @ 2019-01-11 03:17  xhysns  阅读(2497)  评论(0)  编辑  收藏  举报