Jquery 點擊按鈕自動高亮實現(xiàn)原理及代碼
更新時間:2014年04月25日 15:33:54 作者:
拓展一個點擊按鈕自動高亮的原理很簡單,在點擊的時候給元素加上一個自定義的attr,具體實現(xiàn)祥看本文
其實原理很簡單,我們點擊的時候我們給元素加上一個自定義的attr,加上后便會有有一個匹配的樣式去自動適配背景,幾秒后去掉該樣式恢復(fù)原狀
首先在自己的js中拓展一個方法hoverEl
$.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);
}
});
其次定義樣式,當特定attr被加上時
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)用示例:
$(e.target).hoverEl();
首先在自己的js中拓展一個方法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);
}
});
其次定義樣式,當特定attr被加上時
復(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();
您可能感興趣的文章:
- Jquery 點擊按鈕顯示和隱藏層的代碼
- JS/jQuery實現(xiàn)默認顯示部分文字點擊按鈕顯示全部內(nèi)容
- JQuery實現(xiàn)動態(tài)表格點擊按鈕表格增加一行
- jQuery實現(xiàn)點擊按鈕彈出可關(guān)閉層的浮動層插件
- jQuery點擊按鈕彈出遮罩層且內(nèi)容居中特效
- jQuery中iframe的操作(點擊按鈕新增窗口)
- jQuery實現(xiàn)點擊按鈕文字變成input框點擊保存變成文字
- jQuery實現(xiàn)鼠標滾輪動態(tài)改變樣式或效果
- jQuery文本框得到與失去焦點動態(tài)改變樣式效果
- Jquery使用css方法改變樣式實例
- jquery關(guān)于頁面焦點的定位(文本框獲取焦點時改變樣式 )
- jQuery實現(xiàn)的點擊按鈕改變樣式功能示例
相關(guān)文章
jQuery插件HighCharts繪制2D圓環(huán)圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D圓環(huán)圖效果,結(jié)合實例形式分析了jQuery使用HighCharts插件繪制圓環(huán)圖的實現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery+formdata實現(xiàn)上傳進度特效遇到的問題
這篇文章主要介紹了jQuery+formdata實現(xiàn)上傳進度特效遇到的問題的相關(guān)資料,需要的朋友可以參考下2016-02-02jQuery Easy UI中根據(jù)第一個下拉框選中的值設(shè)置第二個下拉框是否可以編輯
這篇文章主要介紹了jQuery Easy UI中根據(jù)第一個下拉框選中的值設(shè)置第二個下拉框是否可以編輯的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-11-11