这是一款自己手写的响应式网站手风琴特效，希望可以帮助大家。

html代码：
<div class="stage">
<ul class="cl">
<li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="picture/1.jpg" width="960" height="540"></a></li>
<li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="picture/2.jpg" width="960" height="540"></a></li>
<li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="picture/3.jpg" width="960" height="540"></a></li>
<li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="picture/4.jpg" width="960" height="540"></a></li>
<li><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="picture/5.jpg" width="960" height="540"></a></li>
</ul>
</div>

css代码：
.stage{background: #fff; }
.stage ul{width: 100%; text-align: center;}
.stage ul li{display: inline-block; position: absolute; float: left; top: 0; height: 100%; overflow: hidden; -webkit-transition-timing-function: cubic-bezier(.38,.01,.22,1); transition-timing-function: cubic-bezier(.38,.01,.22,1); -webkit-transition-duration: 1.2s; transition-duration: 1.2s;}
.stage ul li a{display: block; width: 1000px; height: 100%; position: relative; top: 0; left: 50%; margin-left: -500px; text-align: center;}
.stage ul li a img{ width: auto; height: 100%; position: relative; background: #000;}

js代码：
var
$win=$(window),
$box=$('.stage'),
$ul=$box.find('ul'),
$ulli=$box.find('ul li'),
total=$ulli.size(),curInd=0;
$ulli.css({transitionDuration: '0s'});
$ulli.on({
mouseenter : function(){
curInd=$(this).index();
setTimeout(function(){
changeWidth(curInd);
},10);
},
click : function(){
return false;
}
});
// $ul.mouseleave(function(){
// changeWidth(-1);
// });
// 初始ind=-1即<0满足第一个要求。
var
fixMaxWidth=0;
function changeWidth(ind){
var
norwidth=($win.width())/total,
fixWidth=($win.width()-fixMaxWidth)/(total-1),
leftValue=0,rightValue=0,tmpWidth=0;
$ulli.each(function(i,j){
if(ind<0){
rightValue=$win.width()-(i+1)norwidth;
$(j).css({left: parseInt(leftValue), right: parseInt(rightValue), transitionDuration: ''});
leftValue+=norwidth;
// 图片宽平分
}else{
if(i==ind){
tmpWidth=$(j).find('img').width();
$(j).css({opacity:'1'});
}else{
tmpWidth=fixWidth;
$(j).css({opacity:'.5'});
}
rightValue=$win.width()-(leftValue+tmpWidth);
$(j).css({left: parseInt(leftValue), right: parseInt(rightValue), transitionDuration: ''});
leftValue+=tmpWidth;
// 当前图片宽为图片实际宽度，其他图片宽为剩余平分宽度；right为屛宽-（left+平均宽度），left为宽度递加；
}
});
};
function resizeBox(){
var
imgH=$('.stage ul li a img').height(),
imgW=(imgH/$ulli.first().find('img').attr('height')) $ulli.first().find('img').attr('width');
fixMaxWidth=imgW;
$ulli.find('img').css({height: imgH, width: imgW});
changeWidth(2);
//初始获取宽高及初始打开第几个图片
};
$(window).on({
resize : resizeBox
});
resizeBox();