js實現滑鼠懸停一定時間後觸發事件--淘寶例子
阿新 • • 發佈：2019-02-10
執行截圖
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>閉包--自執行函式--案例--淘寶例子</title> <style type="text/css"> .container{ width: 300px; height: 150px; background-color: #16A085; } .nav_ul{ padding: 0; list-style: none; height: 35px; } .nav_ul li{ float: left; height: 35px; line-height: 35px; text-align: center; width: 25%; transition: all .5s; cursor: pointer; } .select_li{ color: white; border-bottom: 2px solid #FD4401; } .content{ width: 300px; } .content div ul{ padding: 0; list-style: none; width: 300px; } .content div ul li{ float: left; width: 50%; text-align: center; height: 40px; line-height: 40px; cursor: pointer; } .content div{ position: absolute; left: 0; top: 45px; display: none; } .content .select_div{ display: block; } </style> </head> <body> <div class="container"> <div class="nav"> <ul class="nav_ul"> <li class="select_li">劇集</li> <li>電影</li> <li>綜藝</li> <li>動漫</li> </ul> </div> <div class="content"> <div class="select_div"> <ul> <li onclick="window.location.href='https://www.hao123.com/'">琅琊榜</li> <li onclick="window.location.href='https://www.hao123.com/'">盲約</li> <li onclick="window.location.href='https://www.hao123.com/'">無心法師</li> <li onclick="window.location.href='https://www.hao123.com/'">高能醫少</li> </ul> </div> <div> <ul> <li onclick="window.location.href='https://www.hao123.com/'">加勒比</li> <li onclick="window.location.href='https://www.hao123.com/'">繡春刀</li> <li onclick="window.location.href='https://www.hao123.com/'">鮫珠傳</li> <li onclick="window.location.href='https://www.hao123.com/'">變形金剛</li> </ul> </div> <div> <ul> <li onclick="window.location.href='https://www.hao123.com/'">坑王駕到</li> <li onclick="window.location.href='https://www.hao123.com/'">快樂大本營</li> <li onclick="window.location.href='https://www.hao123.com/'">明星大偵探</li> <li onclick="window.location.href='https://www.hao123.com/'">爸爸去哪兒</li> </ul> </div> <div> <ul> <li onclick="window.location.href='https://www.hao123.com/'">友人帳</li> <li onclick="window.location.href='https://www.hao123.com/'">黑賊王</li> <li onclick="window.location.href='https://www.hao123.com/'">你的名字</li> <li onclick="window.location.href='https://www.hao123.com/'">柯南</li> </ul> </div> </div> </div> <script> var liList=document.querySelector('.nav_ul').querySelectorAll('li'); var divList=document.querySelector('.content').querySelectorAll('div'); var timer=null; // 每一個li滑鼠進入事件 for(var index=0;index<liList.length;index++){ // 自執行函式在一寫完、一繫結的時候，不需要觸發就執行 // 自執行函式返回function，實際上 當滑鼠進入時實際上執行的是返回的函式 liList[index].onmouseenter= (function (selectIndex) { return function () { //增加延遲事件 timer=setTimeout(function () { //清除所有樣式 li 顯示相應div中的ul 樣式也去掉 for(var i=0;i<liList.length;i++){ liList[i].removeAttribute('class'); divList[i].removeAttribute('class'); } liList[selectIndex].setAttribute('class','select_li'); divList[selectIndex].setAttribute('class','select_div'); },600); }; }(index)); // 新增滑鼠移出事件，保證離開的時候清除延遲器，不影響下一次操作 liList[index].onmouseleave = function (eve) { clearTimeout(timer); }; } </script> </body> </html>