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

weixin_30856725

于 2019-01-11 03:17:00 发布

阅读量723

点赞数

原文链接：http://www.cnblogs.com/xhysns/p/10253360.html

版权

本文介绍了如何使用原生JavaScript实现鼠标点击时的滑入滑出效果。通过设置div的高度并利用兼容ie8的获取样式值函数及变速动画函数，结合鼠标进入离开事件，达到元素的显示和隐藏。为了防止隐藏部分影响布局，可以将其绝对定位并调整z-index。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近用原生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         }