jQuery手风琴

谁借莪１个温暖的怀抱￠ 2022-02-02 19:15 221阅读 0赞

**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>

发表评论取消回复

表情：

评论列表（有 0 条评论，221人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery实现手风琴效果

css: <style> { padding: 0; margin: 0;

约定不等于承诺〃/ 2022年09月14日 09:09/ 0 赞/ 174 阅读

相关用jQuery实现手风琴动效

我们以前有在网页上看过手风琴样式的图片切换，默认情况是这样的： ![手风琴动效][SouthEast] 图片是这样叠加在一起的，当鼠标滑动到其中一张图片上，它会进行展开

Myth丶恋晨/ 2022年06月08日 02:19/ 0 赞/ 223 阅读

相关 JQ——手风琴

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

绝地灬酷狼/ 2022年06月04日 10:13/ 0 赞/ 192 阅读

相关 JQuery手风琴效果

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Tit

深藏阁楼爱情的钟/ 2022年05月31日 09:55/ 0 赞/ 195 阅读

相关手风琴菜单

html <!DOCTYPE html> <html> <head> <meta charset="utf-8">

Dear 丶/ 2022年05月08日 02:40/ 0 赞/ 221 阅读

相关 jQuery扁平化风格手风琴菜单

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

我会带着你远行/ 2022年04月14日 02:37/ 0 赞/ 234 阅读

相关 jQuery手风琴图片轮播（源码+注释）

> 之前在写js轮播图的时候，没有说手风琴式的轮播图，今天借着jQuery代码少的优势，介绍jQuery下的手风琴轮播图首先看看实现效果：（图片来自百度） ![20190

痛定思痛。/ 2022年03月16日 06:24/ 0 赞/ 239 阅读

相关 jQuery手风琴

Html代码 <body> <div id="main"> <div> <ul>

谁借莪１个温暖的怀抱￠/ 2022年02月02日 19:15/ 0 赞/ 222 阅读

相关使用jQuery创建折叠式菜单（手风琴效果）

使用jQuery创建折叠式菜单（手风琴效果）　　今天给大家介绍如何使用jQuery创建折叠式菜单，即通常所说的手风琴效果（accordion \[əˈkɔ:rdiən\

本是古典何须时尚/ 2021年07月27日 01:24/ 0 赞/ 499 阅读

相关手风琴导航栏侧边-jQuery实现-案例

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

朴灿烈づ我的快乐病毒、/ 2021年06月22日 15:36/ 0 赞/ 579 阅读