Jquery 點(diǎn)擊按鈕自動高亮實(shí)現(xiàn)原理及代碼

2019-11-20 20:46:59

字體：大中小

供稿：網(wǎng)友

其實(shí)原理很簡單，我們點(diǎn)擊的時(shí)候我們給元素加上一個(gè)自定義的attr，加上后便會有有一個(gè)匹配的樣式去自動適配背景，幾秒后去掉該樣式恢復(fù)原狀

首先在自己的js中拓展一個(gè)方法hoverEl

復(fù)制代碼代碼如下:

 
$.extend($.fn, { 
hoverEl:function(){ 

var _this = $(this); 
var _t = setTimeout(function(){ 
_this.attr("hover", "on"); 
}, 10); 
_this.attr("hoverTimeout", _t); 

setTimeout(function(){ 
clearTimeout( _this.attr("hoverTimeout") ); 
var _t = setTimeout(function(){ 
_this.removeAttr("hover"); 
}, 100); 
_this.attr("hoverTimeout", _t); 
},200); 

} 
}); 

其次定義樣式，當(dāng)特定attr被加上時(shí)

復(fù)制代碼代碼如下:

 
li[hover=on]{ 
background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#194FDB), to(#4286F5))!important; 
background-image: -webkit-linear-gradient(top, #4286F5, #194FDB)!important; 
color: white!important; 
cursor: pointer!important; 
} 

調(diào)用示例：

復(fù)制代碼代碼如下:

$(e.target).hoverEl();

上一篇：js控制容器隱藏出現(xiàn)防止樣式變化的兩種方法

下一篇：擴(kuò)展jQuery對象時(shí)如何擴(kuò)展成員變量具體怎么實(shí)現(xiàn)