JQuery 实现突出显示

功能分析：

鼠标移入界面的所在图片变亮，其余图片变暗。当鼠标完全移出界面，所有图片变亮

代码实现：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}body {background: #000;}.wrap {margin: 100px auto 0;width: 630px;height: 394px;padding: 10px 0 0 10px;background: #000;overflow: hidden;border: 1px solid #fff;}.wrap li {float: left;margin: 0 10px 10px 0;}.wrap img {display: block;border: 0;}</style><script src="lib/jquery-1.12.3.js"></script><script>$(function(){/*** 变暗，其实改的是opacity属性的值，改成了0.4*  步骤：*      1.获取所有的li，并且绑定mouseenter事件*      2. 让当前的li的opacity为1，兄弟节点的opacity为0.4*      3. 当离开了div的时候，让所有的li的opacity改成1*/// 1. 给所有的li标签注册鼠标移入的事件$('.wrap ul li').mouseenter(function(){// 2. 当鼠标移入的li标签高亮显示  其余的要变暗一些$(this).css('opacity',1).siblings().css('opacity',0.4)})// 3. 当鼠标离开大盒子div的时候  要让所有的li标签都 恢复原状$('.wrap').mouseleave(function(){// 让所有的li标签恢复原状// find是用来从父级中查找所有的后代标签 不管是儿子级还是孙子级都 会找到$(this).find('li').css('opacity',1)})})</script>
</head>
<body>
<div class="wrap"><ul><li><a href="#"><img src="data:images/01.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/02.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/03.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/04.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/05.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/06.jpg" alt=""/></a></li></ul>
</div>
</body>
</html>

效果图：

未经允许，禁止转载~素材和源码我发资源里记得下载哦

JQuery 实现突出显示相关推荐

php ci ajax用户登录,使用jQuery和CI显示AJAX调用数据库的数据
模型似乎和控制器一样工作. AJAX将结果显示为"null",所以我认为这是因为我们需要将数据作为json发送.如何将数据放到正确的格式,并在视图中显示任何想法使用jQuery和C ...
html下拉框只选择年份和月份,原生jQuery实现只显示年份下拉框
本文实例为大家分享了jQuery实现只显示年份下拉框的具体代码,供大家参考,具体内容如下代码: Document 1949 var date = new Date(); var y = date.g ...
html只选择年份,原生jQuery实现只显示年份下拉框
本文实例为大家分享了jQuery实现只显示年份下拉框的具体代码,供大家参考,具体内容如下代码: Document 1949 var date = new Date(); var y = date.g ...
jQuery动画（显示隐藏，淡入淡出，滑动）
目录分类基本动画函数显示元素交替显示隐藏滑动效果向上收缩效果向下展开效果交替伸缩样式淡入淡出效果淡入效果淡出效果自定义不透明度 jQuery的动画函数分类基本动画函数:既有 ...
jQuery方法---淡入显示与淡出隐藏
jQuery方法---淡入显示与淡出隐藏一.淡入显示二.淡出隐藏三.淡入显示与淡出隐藏切换拓展:淡出淡入设置不透明度一.淡入显示 html部分 <body><div cla ...
jQuery动画的显示与隐藏效果
jQuery中用于控制元素显示和隐藏效果的方法如表1所示. 表1 控制元素的显示和隐藏在表1中,参数speed表示动画的速度,可设置为动画时长的毫秒值(如1000),或预定的3种速度(slow.fa ...
jquery DataTable默认显示指定页
主要添加iDisplayStart和iDisplayLength参数即可 $('#tbshow').DataTable({"paging": true,"aLengthM ...
jQuery动画的显示与隐藏效果！
jQuery中用于控制元素显示和隐藏效果的方法如表1所示. 表1 控制元素的显示和隐藏在表1中,参数speed表示动画的速度,可设置为动画时长的毫秒值(如1000),或预定的3种速度(slow.fa ...
php+ajax+jquery分页并显示数据
参考https://www.helloweba.com/view-blog-195.html html页面 1 <div class="weui-cells" id=&quo ...
jQuery Mobile 手动显示ajax加载器，提示加载中...
在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...

JQuery 实现突出显示

功能分析：

代码实现：

效果图：

JQuery 实现突出显示相关推荐

最新文章

热门文章