Jquery 点击按钮自动高亮实现原理及代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery 点击按钮自动高亮实现原理及代码相关的知识，希望对你有一定的参考价值。
参考技术A 其实原理很简单，我们点击的时候我们给元素加上一个自定义的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实现切换图片相对比较简单，直接贴代码了哈，有注释噢！疑问请追加评论哈，不足之处还请大佬们指出！
1、案例代码：
demo.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery实现点击按钮切换图片</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
text-align: center;/*将box里的内容居中显示*/
}
.btn{
display: inline-blocki;/*让a标签变成行内块级元素*/
height: 30px;
line-height: 30px;
border:1px solid #ccc;
text-decoration: none;
color: #333;
padding: 5px;
font-size: 12px;
}
.btn:active{
background-color: #666;
color: white;
}
</style>
</head>
<body>
<div class="box">
<img src="images/1.jpg" alt="pic" id="img">
<p>
<a href="javascript:;" class="btn" data-control="last">上一页</a>
<a href="javascript:;" class="btn" data-control="next">下一页</a>
</p>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var imgs = [//定义数组用来存储图片的路径
\'images/1.jpg\',
\'images/2.jpg\',
\'images/3.jpg\',
\'images/4.jpg\',
\'images/5.jpg\',
\'images/6.jpg\'
];
var index = 0;//设置第一张图片的索引值为0
var len = imgs.length;//获取存储图片数组的长度
$(\'.btn\').on(\'click\',function(){//绑定点击事件
if($(this).data(\'control\') === "last"){
//如果写成 $(this).data(\'control\') === \'last\'是对的
//如果写成 $(this).data(\'control\') = \'last\'那就始终为真了，没意义
//如果写成 \'last\' === $(this).data(\'control\')是对的
//如果写成 \'last\' = $(this).data(\'control\')语句就会报一个错误
// index--;
// if(index<0){
// index = 0;
// }
// index--;
index = Math.max(0,--index);//如果index的值小于0，使index为0
}else
index = Math.min(len-1,++index);//如果index大于了数组长度 ，使index等于数组长度减一的值
document.title = (index+1)+\'/\'+len;//改变标题内容
$(\'#img\').attr(\'src\',imgs[index]);//动态改变图片的路径
});
</script>
</body>
</html>
2、Effect Picture
案例源码文件：JQuery实现点击按钮切换图片.zip
以上是关于Jquery 点击按钮自动高亮实现原理及代码的主要内容，如果未能解决你的问题，请参考以下文章
jQuery如何实现点击一个按钮触发时间，点击另一个不触发？