jQuery过滤选择器怎么制作图片突出效果？
发布网友
发布时间：2022-04-21 02:19
共1个回答
热心网友
时间：2022-06-17 07:35
我们经常在一些网站上看到图片突出效果，即若干个图片摆放在一起，当鼠标放到某一张图片上时，以其他图片变暗的方式突显这张图。大致效果如下：
首先布局HTML：
<div class="main"> <ul> <li><img src="images/1.jpg" width="350px" height="200px" alt=""></li> <li><img src="images/6.png" width="350px" height="200px" alt=""></li> <li><img src="images/3.jpg" width="350px" height="200px" alt=""></li> <li><img src="images/4.jpg" width="350px" height="200px" alt=""></li> <li><img src="images/5.jpg" width="350px" height="200px" alt=""></li> <li><img src="images/2.jpg" width="350px" height="200px" alt=""></li> </ul> </div>
接下来简单调整一下css样式
<style> *{padding: 0;margin: 0} ul,li{list-style: none;} .main{width:1050px; height: 410px; margin: 100px auto; background-color: #000;} .main li {float: left; } </style>
有没有很简单。
再下一步就是要引入jq和编写jq代码来实现效果了
<script src="images/jquery-1.12.4.js"></script><script> $(function(){ $(".main>ul>li").mouseenter(function(){ $(this).css("opacity","1").siblings().css("opacity","0.3"); $(".main").mouseleave(function(){ $(this).find("li").css("opacity",1); }) }) });</script>
就是这么简单,有没有很意外?主要熟悉使用siblings()和find()两个过滤选择器来实现效果,至于作者的布局好不好看，图片搭配美不美的问题就不要深究了。
