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


Posted in Javascript onApril 25, 2014

其实原理很简单,我们点击的时候我们给元素加上一个自定义的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();
Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
Javascript的闭包
Dec 31 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 #Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 #Javascript
jquery实现select选中行、列合计示例
Apr 25 #Javascript
js点击事件链接的问题解决
Apr 25 #Javascript
对js关键字命名的疑问介绍
Apr 25 #Javascript
html5+javascript制作简易画板附图
Apr 25 #Javascript
js实现字符串的16进制编码不加密
Apr 25 #Javascript
You might like
php 接口类与抽象类的实际作用
2009/11/26 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
php获取linux命令结果的实例
2017/03/13 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
详解Python字符串切片
2019/05/20 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
python使用smtplib模块发送邮件
2020/12/17 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
总经理驾驶员岗位职责
2013/12/04 职场文书
房地产财务管理制度
2014/02/02 职场文书
实习单位鉴定评语
2014/04/26 职场文书
团结演讲稿范文
2014/05/23 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
七夕情人节问候语
2015/11/11 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
导游词之山海关
2019/12/10 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python