jQuery 实现图片突出展示（图片阴影案例）

最新推荐文章于 2024-08-14 14:56:10 发布

豆皮没有豆

最新推荐文章于 2024-08-14 14:56:10 发布

阅读量892

点赞数

分类专栏： JQuery 文章标签： jQuery实现图片突出展示（图片阴影案例）

本文链接：https://blog.csdn.net/qq_43434300/article/details/88991871

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

源码：

<!DOCTYPE html>
<html>
	<head>
		<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;
		      width: 200px;
		      height: 200px;
		    }
	  	</style>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script>
		    $(function () {
			  $(".wrap>ul>li").mouseenter(function () {
			    $(this).css("opacity","1").siblings("li").css("opacity","0.3");
			  });
			  $(".wrap").mouseleave(function () {
			    $(this).find("li").css("opacity",1);
			  });
			});
 		 </script>
	</head>
	<body>
		<div class="wrap">
		  <ul>
			<li><a href="#"><img src="img/1.jpg" alt=""/></a></li>
			<li><a href="#"><img src="img/2.jpg" alt=""/></a></li>
			<li><a href="#"><img src="img/3.jpg" alt=""/></a></li>
			<li><a href="#"><img src="img/4.jpg" alt=""/></a></li>
			<li><a href="#"><img src="img/5.jpg" alt=""/></a></li>
			<li><a href="#"><img src="img/6.jpg" alt=""/></a></li>
		  </ul>
		</div>
	</body>
</html>

效果图：
在这里插入图片描述