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 相关文章推荐
Opacity.js
Jan 22 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 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怎样调用MSSQL的存储过程
2006/10/09 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
arguments对象
2006/11/20 Javascript
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
javascript引用对象的方法代码
2007/08/13 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python异常处理总结
2014/08/15 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
办公设备采购方案
2014/03/16 职场文书
教师党员公开承诺书
2014/03/25 职场文书
企业宣传策划方案
2014/05/29 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
搞笑婚前保证书
2015/02/28 职场文书