jquery，scss實作簡單的手風琴效果
首先頁面引用jquery，基本的css，之後開始對頁面進行整體的布局,首先一個大的div作為容器并且設定容器的大小，之後采用ul li的形式并且要設定為浮動float：left，裡面嵌套a标簽為了跳轉頁面；具體如下方：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="base.css" rel="stylesheet"/>
<link href="accordion.css" rel="stylesheet"/>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="accordion-warp">
<ul class="boxrecommend clearfix">
<li class="box-item on" style="width: 460px;">
<div class="box-img" >
<a href="#" target="_blank"><img class="li-img" src="1.png"></a>
</div>
</li>
<li class="box-item" style="width: 203px;">
<div class="box-img">
<a href="#" target="_blank"><img class="li-img" src="2.png"></a>
</div>
</li>
<li class="box-item" style="width: 203px;">
<div class="box-img">
<a href="#" target="_blank"><img class="li-img" src="3.png"></a>
</div>
</li>
<li class="box-item last" style="width: 203px;">
<div class="box-img" >
<a href="#" target="_blank"><img class="li-img" src="4.png"></a>
</div>
</li>
</ul>
</div>
</body>
</html>
之後開始寫css，要想要裡面的圖檔在還未全部顯示的時候怎麼辦，這個時候就要設定包含圖檔的容器也就是.box-img要設定為絕對定位，預設都是0，滑鼠移動到目前的li上面lef變成該div的四分一，這樣就能保證預設圖檔是劇中的，具體css看下方代碼
.clearfix { width: %; margin: auto; *zoom: ; }
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }
.accordion-warp { width: px; margin: px auto; }
.boxrecommend { height: px; margin-bottom: px; overflow: hidden; width: px; }
.boxrecommend li { box-sizing: border-box; cursor: pointer; float: left; height: px; margin-right: px; overflow: hidden; position: relative; }
.boxrecommend li.last { margin-right: ; }
.boxrecommend li.box-item { height: %; }
.boxrecommend li .box-img { bottom: ; left: ; overflow: hidden; position: absolute; top: ; }
.boxrecommend li .box-img img { height: px; width: px; }
接下來配合jquery就大功告成啦！
$(function(){
var c = $(".boxrecommend").find("li.box-item")
c.hover(function () {
var b = $(this);
//找到不是目前元素的li當寬度達到203時候停止動畫效果，并且移除添加的辨別css：on，給下方的圖檔left定位是圖檔劇中
c.not(b).stop().animate({width: "203px"}).removeClass("on").children(".box-img").css("left","-115px");
//滑鼠移動到目前位置當寬度達到460時候停止動畫效果，并且添加class為on的辨別，是圖檔left為0
b.stop().animate({width: "460px"}).addClass("on").children(".box-img").css("left",)
}), $(window).resize(function () {
c.filter(".on").mouseenter()
})
});
以下為scss
@charset "utf-8";
.clearfix{
width:%;margin: auto;*zoom:;
&:before,&:after{display: table;content:""}
&:after{clear:both}
}
.accordion-warp{
width:px;
margin:px auto;
}
.boxrecommend {
height: px;
margin-bottom: px;
overflow: hidden;
width: px;
& li{
box-sizing: border-box;
cursor: pointer;
float: left;
height: px;
margin-right: px;
overflow: hidden;
position: relative;
&.last {
margin-right: ;
}
&.box-item {
height: %;
}
& .box-img {
bottom: ;
left: ;
overflow: hidden;
position: absolute;
top: ;
& img {
height: px;
width: px;
}
}
}
}
直接下載下傳寫好的内容，jquery實作簡單的手風琴效果http://download.csdn.net/detail/ztj771299799/9688799
![十大酷炫屌的圖像懸停特效[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)