发布于 2016-10-08 05:36:35 | 36 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例,程序狗速度看过来!

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。


拓展一个点击按钮自动高亮的原理很简单,在点击的时候给元素加上一个自定义的attr,具体实现祥看本文
其实原理很简单,我们点击的时候我们给元素加上一个自定义的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(); 


相关阅读 :
Jquery 点击按钮自动高亮实现原理及代码
jQuery点击按钮弹出遮罩层且内容居中特效
Jquery 点击按钮显示和隐藏层的代码
jQuery截取指定长度字符串的实现原理及代码
jquery 页眉单行信息滚动显示实现思路及代码
jQuery实现图片放大预览实现原理及代码
jquery获得页面元素的坐标值实现思路及代码
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Jquery写一个鼠标拖动效果实现原理与代码
jQuery实现点击按钮文字变成input框点击保存变成文字
JQuery实现动态表格点击按钮表格增加一行
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
最新网友评论  共有(0)条评论 发布评论 返回顶部
月排行榜

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务