Jquery 点击按钮自动高亮实现原理及代码
更新时间：2014年04月25日 15:33:54 作者：
拓展一个点击按钮自动高亮的原理很简单，在点击的时候给元素加上一个自定义的attr，具体实现祥看本文
其实原理很简单，我们点击的时候我们给元素加上一个自定义的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();
首先在自己的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();
相关文章
这篇文章主要介绍了jquery分页插件jpaginate不兼容ie的问题,需要的朋友可以参考下2014-04-04
下面小编就为大家带来一篇浅谈jquery的html方法里包含特殊字符的处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
下面小编就为大家带来一篇jquery跟随屏幕滚动效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-04-04
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts绘制2D圆环图效果,结合实例形式分析了jQuery使用HighCharts插件绘制圆环图的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了jQuery获得字体颜色16位码的方法,涉及jQuery样式操作及正则表达式使用技巧,非常简单实用,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了jQuery+formdata实现上传进度特效遇到的问题的相关资料,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了jQuery给元素添加样式的方法,结合实例形式详细分析了jQuery给元素添加样式的各种常见操作技巧,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了JQuery分屏指示器图片轮换效果实现方法,实例分析了jQuery图片轮播操作的相关技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了修改或扩展jQuery原生方法的代码实例,本文用一个扩展jquery原生方法val的例子,讲解了如何对jquery原生方法修改或扩展,需要的朋友可以参考下2015-01-01
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
这篇文章主要介绍了jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-11-11
最新评论