手风琴效果的图片展示

Posted 柠檬张先生

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手风琴效果的图片展示相关的知识，希望对你有一定的参考价值。

核心方法：

animate({

　　　　width:"20%" 
　　},600);

　　鼠标滑动的时候通过触发动画动态改变目标图片和其他相邻图片的长度来突出目标图片

demo源码

点击看效果demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery之图片关联伸缩效果</title>
<style type="text/css">
h3{
    text-align: center;
}
#test_box{
    max-width:640px; 
    _width:640px; 
    margin:1.2em auto; 
    list-style: none;
    padding:5em 0;
}
.fix{zoom:1;}
.fix:after,.fix:before{
    display:block; 
    content:"clear"; 
    height:0; 
    clear:both; 
    overflow:hidden; 
    visibility:hidden;
}
.imgList{width:20%; height:170px; float:left;}
.showImg_1{background:gray url(../images/imgcommon2.jpg) no-repeat;}
.showImg_2{background:gray url(../images/imgcommon3.jpg) no-repeat;}
.showImg_3{background:gray url(../images/imgcommon1.jpg) no-repeat;}
.showImg_4{background:gray url(../images/imgcommon4.jpg) no-repeat;}
.ul-container{
    width: 80%;
    padding-left: 108px;
    margin: 0 auto;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <h3>jQuery之图片关联伸缩效果</h3>
    <div class="ul-container">
		<ul id="test_box" class="fix">
			<li class="imgList showImg_1"></li>
            <li class="imgList showImg_2"></li>
            <li class="imgList showImg_3"></li>
            <li class="imgList showImg_4"></li>
        </ul>
    </div>
    <script type="text/javascript">
       $(function(){
           let accordion = (function() {
                let states = {
                    pic1: function(target) {
                        target.animate({
                            width:"27%"	
                        },\'fast\');	
                    },
                    pic2: function(target) {
                        target.animate({
                            width:"23%"	
                        },\'fast\');	
                    },
                    pic3: function(target) {
                        target.animate({
                            width:"37%"	
                        },\'fast\');	
                    },
                    pic4: function(target) {
                        target.animate({
                            width:"23%"	
                        },\'fast\');
                    }
                };
                return {
                    show: function(type, target) {
                        states[type](target)
                    }
                }
           })();
            $(".imgList").mouseover(function(){
                $(".imgList").not($(this)).animate({
                    width:"20%"	
                },\'fast\');	
                let type = \'\';
                switch($(this).attr(\'class\').split(\' \')[1]) {
                    case \'showImg_1\': 
                        type = \'pic1\';
                        break;
                    case \'showImg_2\': 
                        type = \'pic2\';
                        break;
                    case \'showImg_3\': 
                        type = \'pic3\';
                        break;
                    case \'showImg_4\': 
                        type = \'pic4\';
                        break;
                };
                accordion.show(type, $(this));							  
            }).mouseout(function(){
                $(".imgList").animate({
                    width:"20%"	
                },\'slow\');	
            });
        });
    </script>
</body>
</html>

　　效果图

这是划过第一个图片的伸缩效果

以上是关于手风琴效果的图片展示的主要内容，如果未能解决你的问题，请参考以下文章

214 jQuery案例：王者荣耀手风琴效果

我网页现在有一排手风琴效果的图片，现在要求鼠标光标滑到任意一个图，下方显示相应图，用jQuery

手风琴效果的图片展示

JS制作图片手风琴效果

QQ菜单案例，点击展开再次点击关闭（类似手风琴效果）

手风琴式相册图片展开效果