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

   其实原理很简单,我们点击的时候我们给元素加上一个自定义的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();

时间: 2016-04-26

Jquery 点击按钮自动高亮实现原理及代码的相关文章

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

其实原理很简单,我们点击的时候我们给元素加上一个自定义的attr,加上后便会有有一个匹配的样式去自动适配背景,几秒后去掉该样式恢复原状 首先在自己的js中拓展一个方法hoverEl 复制代码 代码如下: $.extend($.fn, { hoverEl:function(){ var _this = $(this); var _t = setTimeout(function(){ _this.attr("hover", "on"); }, 10); _this.at

jQuery点击按钮弹出遮罩层且内容居中特效_jquery

本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮.一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devic

jquery点击按钮后变灰实现程序代码

下面是我以前用的一个js倒计时的效果,也是点击之后60秒之内不可再点击效果.  代码如下 复制代码 <html> <head> <title>点击获取验证码按钮后按钮变灰,倒计时一段时间后又可重复点击</title> </head> <body> <input type="button" id="btn" value="免费获取验证码" /> <script

js点击按钮实现水波纹效果代码(CSS3和Canves)_javascript技巧

近来看到个不错的按钮点击效果,当点击时产生一次水波涟漪效果,挺好玩的,于是简单的实现了下(没考虑低版本浏览器兼容问题)  先看看效果吧,如下图(录制gif软件有点渣,看起来卡卡的...)   这种效果可以由元素内嵌套canves实现,也可以由css3实现.  Canves实现  网上摘了一份canves实现的代码,略微去掉了些重复定义的样式并且给出js注释,代码如下  html代码:<a class="btn color-1 material-design" data-color

点击按钮自动加关注的代码

 本篇文章主要介绍了点击按钮自动加关注代码(sina微博/QQ空间/人人网/腾讯微博) 需要的朋友可以过来参考下,希望对大家有所帮助 sina微博: <iframe width="120" height="24" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0" scrolling=&

jquery 点击按钮后,倒计时60秒才能再次点击发送

例  代码如下 复制代码 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascript"> var wait=60; function time(o) {         if (wait == 0) {             o.removeAttribute("disabled");

css按钮自适应实现原理及代码

按钮自适应原理是利用a标签和i标签各自一个背景组合成为按钮,达到自适应,具体实现css样式及html结构如下,感兴趣的朋友可以参考下   原理:利用a标签和i标签各自一个背景组合成为按钮,达到自适应. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .btn a{text-deco

哪位高人给个点击按钮就能发送邮件的代码

问题描述 在iis中已经装了邮件服务器,求助哪位高人给个自动发送邮件的代码,比如邮箱url:http://email.163.com/用户名:123密码:123主题:123内容:123在自己写的页面,点击下按钮就能发生邮件.在此谢过! 解决方案 解决方案二: 解决方案三: 解决方案四: 解决方案五: 解决方案六:a哪位高人给写一个一键上网的软件?b行啊,看看这个代码?a真的这么好么?那我不用向电信交费了啊?b这个不行...明白了么?要想成功发送邮件,必须满足以下条件:(1)互联网本身正常(2)S

点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)_javascript技巧

sina微博:<iframe width="120" height="24" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" border="0" src="http://widget.weibo.com