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 相关文章推荐
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
详解vue项目构建与实战
Jun 27 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 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与javascript的两种交互方式
2006/10/09 PHP
用session做客户验证时的注意事项
2006/10/09 PHP
php intval的测试代码发现问题
2008/07/27 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
jquery实现动态画圆
2014/12/04 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
Python lambda和Python def区别分析
2014/11/30 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
Python API len函数操作过程解析
2020/03/05 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
python线程里哪种模块比较适合
2020/08/02 Python
利用python汇总统计多张Excel
2020/09/22 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
化工专业个人的求职信范文
2013/11/28 职场文书
实习介绍信模板
2015/01/30 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
python字典的元素访问实例详解
2021/07/21 Python