用原生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，比后面的内容数值高一些，就不会影响了~

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

转载于:https://www.cnblogs.com/xhysns/p/10253360.html

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

php点击弹出文字代码,js实现鼠标点击页面弹出自定义文字效果
本文实例为大家分享了js鼠标点击页面弹出文字的具体代码,供大家参考,具体内容如下效果: 实现代码: (function(e){ // 点击事件触发生生元素等一系列动作的初始状态 var bombFl ...
html显示隐藏内容点击显示数据表代码,js如何实现点击显示和隐藏表格
js如何实现点击显示和隐藏表格一.总结一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...
JS实现鼠标点击展开/隐藏表格行
<title>JS实现鼠标点击展开/隐藏表格行_网页代码站(www.webdm.cn)</title> <script language="javascript ...
html点击鼠标页面出现爱心,js实现鼠标点击飘爱心效果
本文实例为大家分享了js实现鼠标点击飘爱心的具体代码,供大家参考,具体内容如下鼠标点击特效 html { cursor: pointer; } h3 { text-align: center; us ...
html5统计鼠标点击的次数,怎么实现js统计鼠标点击次数
学习前端的同学你们知道怎么JS实现在线统计一个页面内鼠标点击次数的方法吗?不知道的话跟着学习啦小编一起来学习JS实现在线统计一个页面内鼠标点击次数的方法. 本文实例讲述了JS实现在线统计一个页面内鼠标 ...
点击编辑框全选内容java,js实现鼠标点击文本框自动选中内容的方法
本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候, ...
JS实现鼠标点击处烟花爆炸效果
JS实现鼠标点击处烟花爆炸效果(面向对象版) 程序由网上开源"JS实现放烟花效果"代码改编,实现在鼠标点击处出现烟花爆炸效果. 改编前源码link https://github. ...
原生JS实现鼠标按下拖拽效果
原生JS实现鼠标按下拖拽效果 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
原生js实现轮播图-滑入滑出效果
滑入滑出轮播图 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...

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

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

最新文章

热门文章