用原生js完成鼠標點擊顯示滑入滑出效果

本文轉載自查看原文 2019-01-11 03:17 1132

最近用原生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，比后面的內容數值高一些，就不會影響了~

如果有什么不對謝謝指正~有好的方法歡迎提出~

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js入門事件（滑入滑出顯示與隱藏效果）使用原生JS，實現鼠標點擊愛心效果！！！鼠標點擊顯示文字效果【JS動態效果】如何jquery實現div右側滑入滑出的效果 js 鼠標點擊事件工作當中實際運用（3）——js原生實現鼠標點擊彈出div層在點擊隱藏原生js添加博客點擊鼠標出小心心效果~~ jQuery讓div顯示在鼠標點擊位置鼠標滑入滑出判斷事件（轉自流雲諸葛） JS之Math.sin與Math.cos介紹及應用-實現鼠標點擊后的煙花效果