jquery插件實(shí)現(xiàn)鼠標(biāo)隱藏
本文實(shí)例為大家分享了jquery插件實(shí)現(xiàn)鼠標(biāo)隱藏的具體代碼,供大家參考,具體內(nèi)容如下
鼠標(biāo)懸浮在某個(gè)dom上的時(shí)候,自動(dòng)給你隱藏,效果圖因?yàn)殇浧淋浖膯?wèn)題,作用不出來(lái)
效果如下
代碼部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>做久置隱藏</title> <script src="js/jquery-3.4.1.min.js"></script> <style> *{ margin: 0; padding: 0; } .box{ border: 1px solid lightgray; width: 100px; height: 100px; margin: 10px; float: left; } </style> </head> <body> <div class="box" id="box1" style="background-color: #1abc9c;"></div> <div class="box" id="box2" style="background-color: #3498db;"></div> <div class="box" id="box3" style="background-color: #f1c40f;"></div> <div class="box" id="box4" style="background-color: #e74c3c;"></div> <div class="box" id="box5" style="background-color: #9b59b6;"></div> </body> </html> <script> $(function(){ $.mh(["#box1","#box3","#box5"]); }) $.extend({ mh:function(op,time){ op=op==undefined?[]:op;//對(duì)象 time = time==undefined?500:time;//多久隱藏 var str = op.join(','); var t = null; var f = false; $(str).mouseenter(function(){ f = true; $(str).css('cursor','default'); }).mouseleave(function(){ f = false; clearTimeout(t); $(str).css('cursor','default'); }).mousemove(function(){ if(f){ $(str).css('cursor','default'); clearTimeout(t); hid(); }else{ clearTimeout(t); } }) function hid(){ t =setTimeout(function(){ $(str).css('cursor','none'); console.log('隱藏了'); },time) } } }) </script>
思路解釋
- 把所有動(dòng)作考慮進(jìn)去,只要鼠標(biāo)符合我們的判斷,給一個(gè)樣式cursor:none就完事
- 此外就是給上cursor:default還原默認(rèn)樣式了
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)鏈接控制圖片的滑動(dòng)展開(kāi)與隱藏效果
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)出現(xiàn)隱藏層文字鏈接的方法
- jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值
- jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示離開(kāi)隱藏效果
- jQuery 網(wǎng)易相冊(cè)鼠標(biāo)移動(dòng)顯示隱藏效果實(shí)現(xiàn)代碼
- 基于JQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框顯示隱藏提示文本
- 基于jquery鼠標(biāo)點(diǎn)擊其它地方隱藏層的實(shí)例代碼
- jQuery實(shí)現(xiàn)表單input中提示文字value隨鼠標(biāo)焦點(diǎn)移進(jìn)移出而顯示或隱藏的代碼
相關(guān)文章
jQuery實(shí)現(xiàn)消息滾動(dòng)播放效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)消息滾動(dòng)播放效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02讓input框?qū)崿F(xiàn)類似百度的搜索提示(基于jquery事件監(jiān)聽(tīng))
讓input框?qū)崿F(xiàn)類似百度的搜索提示,oninput和onpropertychange事件監(jiān)聽(tīng),通過(guò)ajax獲取json數(shù)據(jù)2014-01-01動(dòng)態(tài)加載jQuery的兩種方法實(shí)例分析
這篇文章主要介紹了動(dòng)態(tài)加載jQuery的兩種方法,實(shí)例分析了jquery動(dòng)態(tài)加載的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07淺談ajax在jquery中的請(qǐng)求和servlet中的響應(yīng)
下面小編就為大家分享一篇淺談ajax在jquery中的請(qǐng)求和servlet中的響應(yīng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01jQuery 打造動(dòng)態(tài)下滑菜單實(shí)現(xiàn)說(shuō)明
本教程將分步講解如何使用JQuery和CSS打造一個(gè)炫酷動(dòng)感菜單。2010-04-04jQuery控制網(wǎng)頁(yè)打印指定區(qū)域的方法
這篇文章主要介紹了jQuery控制網(wǎng)頁(yè)打印指定區(qū)域的方法,涉及jQuery操作html元素的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04一款基jquery超炫的動(dòng)畫(huà)導(dǎo)航菜單可響應(yīng)單擊事件
。這款導(dǎo)航菜單,初始時(shí)頁(yè)面中間一個(gè)按鈕,單擊按鈕,菜單從左側(cè)飛入頁(yè)中。再次單擊按鈕,導(dǎo)航飛入左側(cè)消息2014-11-11jQuery插入節(jié)點(diǎn)和移動(dòng)節(jié)點(diǎn)用法示例(insertAfter、insertBefore方法)
這篇文章主要介紹了jQuery插入節(jié)點(diǎn)和移動(dòng)節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了insertAfter和insertBefore方法針對(duì)頁(yè)面元素節(jié)點(diǎn)操作的使用技巧,需要的朋友可以參考下2016-09-09