手风琴效果的图片展示

核心方法：

animate({

　　　　"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-640px; 
    _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{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{
     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({
                            "27%"	
                        },'fast');	
                    },
                    pic2: function(target) {
                        target.animate({
                            "23%"	
                        },'fast');	
                    },
                    pic3: function(target) {
                        target.animate({
                            "37%"	
                        },'fast');	
                    },
                    pic4: function(target) {
                        target.animate({
                            "23%"	
                        },'fast');
                    }
                };
                return {
                    show: function(type, target) {
                        states[type](target)
                    }
                }
           })();
            $(".imgList").mouseover(function(){
                $(".imgList").not($(this)).animate({
                    "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({
                    "20%"	
                },'slow');	
            });
        });
    </script>
</body>
</html>

　　效果图

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

相关阅读:
OC与JS交互之WKWebView
iOS下JS与OC互相调用（三）--MessageHandler
html base64 img 图片显示
 Vue中img的src属性绑定与static文件夹
 XML 树结构
 XML 用途
 XML 简介
 JS Window对象
 JS Math对象
 JS 字符串操作
原文地址：https://www.cnblogs.com/lemon-zhang/p/7991865.html