jquery插件實(shí)現(xiàn)鼠標(biāo)隱藏
本文實(shí)例為大家分享了jquery插件實(shí)現(xiàn)鼠標(biāo)隱藏的具體代碼,供大家參考,具體內(nèi)容如下
鼠標(biāo)懸浮在某個(gè)dom上的時(shí)候,自動(dòng)給你隱藏,效果圖因?yàn)殇浧淋浖膯栴},作用不出來
效果如下

代碼部分
<!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)樣式了
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過鏈接控制圖片的滑動(dòng)展開與隱藏效果
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)出現(xiàn)隱藏層文字鏈接的方法
- jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值
- jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示離開隱藏效果
- 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)聽)
讓input框?qū)崿F(xiàn)類似百度的搜索提示,oninput和onpropertychange事件監(jiān)聽,通過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ì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
jQuery 打造動(dòng)態(tài)下滑菜單實(shí)現(xiàn)說明
本教程將分步講解如何使用JQuery和CSS打造一個(gè)炫酷動(dòng)感菜單。2010-04-04
一款基jquery超炫的動(dòng)畫導(dǎo)航菜單可響應(yīng)單擊事件
。這款導(dǎo)航菜單,初始時(shí)頁面中間一個(gè)按鈕,單擊按鈕,菜單從左側(cè)飛入頁中。再次單擊按鈕,導(dǎo)航飛入左側(cè)消息2014-11-11
jQuery插入節(jié)點(diǎn)和移動(dòng)節(jié)點(diǎn)用法示例(insertAfter、insertBefore方法)
這篇文章主要介紹了jQuery插入節(jié)點(diǎn)和移動(dòng)節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了insertAfter和insertBefore方法針對(duì)頁面元素節(jié)點(diǎn)操作的使用技巧,需要的朋友可以參考下2016-09-09

