jQuery手风琴

最新推荐文章于 2023-07-28 17:16:08 发布

IT-Xu_LongTeng

最新推荐文章于 2023-07-28 17:16:08 发布

阅读量439

点赞数 1

文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_44269204/article/details/90140550

版权

Html代码

<body>
		<div id="main">
		    <div>
		        <ul>
		            <li>
		                <div class="des">
		                    <h4>S3冠军皮肤</h4>
		                </div>
		                <div style="background:url(../img/S3.jpg) center;"></div>
		            </li>
		            <li>
		                <div class="des">
		                    <h4>S4冠军皮肤</h4>
		                </div>
		                <div style="background: url(../img/S4.jpg) center;"></div>
		            </li>
		            <li>
		                <div class="des">
		                    <h4>S5冠军皮肤</h4>
		                </div>
		                <div style="background: url(../img/S5.jpg) center;"></div>
		            </li>
		            <li>
		                <div class="des">
		                    <h4>S6冠军皮肤</h4>
		                </div>
		                <div style="background: url(../img/S6.jpg) center;"></div>
		            </li>
		            <li>
		                <div class="des">
		                    <h4>S7冠军皮肤</h4>
		                </div>
		                <div style="background: url(../img/S7.jpg) center;"></div>
		            </li>
		        </ul>
		    </di6v>
		</div>
	</body>

Css的代码

<style type="text/css">
	        * {margin: 0;padding: 0;}
	        ul li {list-style: none;}       
	        #main {width: 100%;height: 260px;margin: 40px 5%;}  
	        .top {width: 100%;} 
	        #main ul li {width: 200px;height: 260px;float: left;position:relative;}
	        #main ul li div {width: 100%;height: 260px;}    
	        #main ul li div.des {position: absolute;left: 0;top: 0;background: rgba(0, 0, 0, .3);}  
	        #main ul li div.des h4 {color: #FFF;font-size: 30px;padding: 30px;width: 30px;margin: 0 auto;}
   	   </style>

jQuery的代码

<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#main").find('li').mouseover(function(){
					$(this).find('.des').hide()  //通过当前发生事件的元素 找到子集 des 然后让 des 隐藏; 隐藏之后进行动画;					
						.end().stop().animate({
							width:400
						}).siblings().stop().animate({
							width:160
						})	
														
				})
				$('#main').find('li').mouseout(function(){
					$(this).find('.des').show()
						.end().stop().animate({
							width:200
						}).siblings().stop().animate({
							width:200
						})										
					})
			})
								
		</script>