jquery 美丽的手风琴效果

在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="js/jquery-3.5.1.min.js"></script>
		<style>
			* {
     
     
				margin: 0;
				padding: 0;
			}

			img {
     
     
				display: block;
			}

			ul {
     
     
				list-style: none;
			}

			.king {
     
     
				width: 752px;
				margin: 100px auto;
				background: url(images/bg.png) no-repeat;
				overflow: hidden;
				padding: 10px;
			}


			.king li {
     
     
				position: relative;
				float: left;
				width: 69px;
				height: 69px;
				margin-right: 10px;
				overflow: hidden;
				/*transition: all .5s;*/
			}

			.king li.current {
     
     
				width: 224px;
			}

			.king li.current .big {
     
     
				display: block;
			}

			.king li.current .small {
     
     
				display: none;
			}

			.big {
     
     
				width: 224px;
				display: none;
			}

			.small {
     
     
				position: absolute;
				top: 0;
				left: 0;
				width: 69px;
				height: 69px;
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<div class="king">
			<ul>
				<li class="current">
					<a href="#">
						<img src="../pictures/2015.02.04-119.jpeg" alt="" class="small">
						<img src="../pictures/2015.02.04-119.jpeg" alt="" class="big">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../pictures/2015.01.09-228.jpeg" alt="" class="small">
						<img src="../pictures/2015.01.09-228.jpeg" alt="" class="big">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../pictures/2015.05.25-335.png" alt="" class="small">
						<img src="../pictures/2015.05.25-335.png" alt="" class="big">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../pictures/2015.02.06-1364.jpg" alt="" class="small">
						<img src="../pictures/2015.02.06-1364.jpg" alt="" class="big">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../pictures/2015.02.07-195.jpeg" alt="" class="small">
						<img src="../pictures/2015.02.07-195.jpeg" alt="" class="big">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../pictures/2015.02.14-1838.jpg" alt="" class="small">
						<img src="../pictures/2015.02.14-1838.jpg" alt="" class="big">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../pictures/2015.02.14-1301.png" alt="" class="small">
						<img src="../pictures/2015.02.14-1301.png" alt="" class="big">
					</a>
				</li>
			</ul>
		</div>
	</body>
	<script>
        $(function () {
     
     
            $('.king li').mouseover(function () {
     
     
                /*/!*方法一, 无淡入淡出效果, 且需要在上方li样式里加上transition*!/
	            $('li').removeClass('current');
	            $(this)[0].className='current';*/
	            /*方法二*/
                // 当前li宽度变为224px, 同时小图片淡出,大图片淡入
                $(this).stop().animate({
     
     
                    width: 224
                }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();
	            $(this).siblings('li').stop().animate({
     
     
		            width:69
	            }).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut();
            })

        })
	</script>
</html>
jquery 美丽的手风琴效果

猜你喜欢
