Maison > interface Web > js tutoriel > le corps du texte

Jquery 点击按钮自动高亮实现原理及代码_jquery

WBOY
Libérer: 2016-05-16 16:51:05
original
1068 Les gens l'ont consulté

其实原理很简单,我们点击的时候我们给元素加上一个自定义的attr,加上后便会有有一个匹配的样式去自动适配背景,几秒后去掉该样式恢复原状

首先在自己的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;
}

调用示例:
复制代码 代码如下:

$(e.target).hoverEl();
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!