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实现倒计时按钮功能代码分享
Sep 03 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 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
我的群发邮件程序
2006/10/09 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
Python群发邮件实例代码
2014/01/03 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
详解python数据结构和算法
2019/04/18 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
前台领班岗位职责
2013/12/04 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
简历自我评价模版
2014/01/31 职场文书
普通党员对照检查材料
2014/09/24 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
商铺门面租房协议书
2014/10/21 职场文书
活动主持人开场白
2015/05/28 职场文书
python如何做代码性能分析
2021/04/26 Python
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python