js如何實(shí)現(xiàn)鼠標(biāo)懸停一定時(shí)間后觸發(fā)事件

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:12:32

js如何實(shí)現(xiàn)鼠標(biāo)懸停一定時(shí)間后觸發(fā)事件

js如何實(shí)現(xiàn)鼠標(biāo)懸停一定時(shí)間后觸發(fā)事件:<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>閉包--自執(zhí)行函數(shù)--案例--淘寶例子</title> <style type="text/css"> .container{ width: 300px; height: 150px; backg

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀js如何實(shí)現(xiàn)鼠標(biāo)懸停一定時(shí)間后觸發(fā)事件:<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>閉包--自執(zhí)行函數(shù)--案例--淘寶例子</title> <style type="text/css"> .container{ width: 300px; height: 150px; backg

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>閉包--自執(zhí)行函數(shù)--案例--淘寶例子</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 p ul{
 padding: 0;
 list-style: none;
 width: 300px;
 }
 .content p ul li{
 float: left;
 width: 50%;
 text-align: center;
 height: 40px;
 line-height: 40px;
 cursor: pointer;
 }
 .content p{
 position: absolute;
 left: 0;
 top: 45px;
 display: none;
 }
 .content .select_p{
 display: block;
 }

 </style>
</head>
<body>
 <p class="container">
 <p class="nav">
 <ul class="nav_ul">
 <li class="select_li">劇集</li>
 <li>電影</li>
 <li>綜藝</li>
 <li>動(dòng)漫</li>
 </ul>
 </p>
 <p class="content">
 <p class="select_p">
 <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/'">高能醫(yī)少</li>
 </ul>
 </p>
 <p>
 <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>
 </p>
 <p>
 <ul>
 <li onclick="window.location.href='https://www.hao123.com/'">坑王駕到</li>
 <li onclick="window.location.href='https://www.hao123.com/'">快樂大本營(yíng)</li>
 <li onclick="window.location.href='https://www.hao123.com/'">明星大偵探</li>
 <li onclick="window.location.href='https://www.hao123.com/'">爸爸去哪兒</li>
 </ul>
 </p>
 <p>
 <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>
 </p>
 </p>
 </p>
 <script>
 var liList=document.querySelector('.nav_ul').querySelectorAll('li');
 var pList=document.querySelector('.content').querySelectorAll('p');
 var timer=null;
 // 每一個(gè)li鼠標(biāo)進(jìn)入事件
 for(var index=0;index<liList.length;index++){
 // 自執(zhí)行函數(shù)在一寫完、一綁定的時(shí)候，不需要觸發(fā)就執(zhí)行
 // 自執(zhí)行函數(shù)返回function，實(shí)際上 當(dāng)鼠標(biāo)進(jìn)入時(shí)實(shí)際上執(zhí)行的是返回的函數(shù)
 liList[index].onmouseenter= (function (selectIndex) {
 return function () {
 //增加延遲事件
 timer=setTimeout(function () {
 //清除所有樣式 li 顯示相應(yīng)p中的ul 樣式也去掉
 for(var i=0;i<liList.length;i++){
 liList[i].removeAttribute('class');
 pList[i].removeAttribute('class');
 }
 liList[selectIndex].setAttribute('class','select_li');
 pList[selectIndex].setAttribute('class','select_p');
 },600);
 };
 }(index));
 // 添加鼠標(biāo)移出事件，保證離開的時(shí)候清除延遲器，不影響下一次操作
 liList[index].onmouseleave = function (eve) {
 clearTimeout(timer);
 };
 }
 </script>

</body>
</html>

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js如何實(shí)現(xiàn)鼠標(biāo)懸停一定時(shí)間后觸發(fā)事件

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：設(shè)置如何讓時(shí)間

熱門焦點(diǎn)

js如何實(shí)現(xiàn)鼠標(biāo)懸停一定時(shí)間后觸發(fā)事件

js如何實(shí)現(xiàn)鼠標(biāo)懸停一定時(shí)間后觸發(fā)事件

js如何實(shí)現(xiàn)鼠標(biāo)懸停一定時(shí)間后觸發(fā)事件

最新推薦

猜你喜歡

熱門推薦