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 相关文章推荐
js 异步处理进度条
Apr 01 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
javascript实现简易计算器
Feb 01 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
扩展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 第二节 数据类型之字符串类型
2012/04/28 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python中字符串的格式化方法小结
2016/05/03 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
Python中文编码知识点
2019/02/18 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
如何对python的字典进行排序
2020/06/19 Python
中文系师范生自荐信
2013/10/01 职场文书
信息工程学院毕业生推荐信
2013/11/05 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
公司2015年终工作总结
2015/05/26 职场文书
入党积极分子考察意见
2015/06/02 职场文书
行政复议答复书
2015/07/01 职场文书