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: 100%; margin: 0 auto; *zoom: 1; }
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }
.accordion-warp { width: 1200px; margin: 100px auto; }
.boxrecommend { height: 340px; margin-bottom: 20px; overflow: hidden; width: 1100px; }
.boxrecommend li { box-sizing: border-box; cursor: pointer; float: left; height: 340px; margin-right: 10px; overflow: hidden; position: relative; }
.boxrecommend li.last { margin-right: 0; }
.boxrecommend li.box-item { height: 100%; }
.boxrecommend li .box-img { bottom: 0; left: 0; overflow: hidden; position: absolute; top: 0; }
.boxrecommend li .box-img img { height: 340px; width: 460px; }
接下来配合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",0)
}), $(window).resize(function () {
c.filter(".on").mouseenter()
})
});
以下为scss
@charset "utf-8";
.clearfix{
width:100%;margin:0 auto;*zoom:1;
&:before,&:after{display: table;content:""}
&:after{clear:both}
}
.accordion-warp{
width:1200px;
margin:100px auto;
}
.boxrecommend {
height: 340px;
margin-bottom: 20px;
overflow: hidden;
width: 1100px;
& li{
box-sizing: border-box;
cursor: pointer;
float: left;
height: 340px;
margin-right: 10px;
overflow: hidden;
position: relative;
&.last {
margin-right: 0;
}
&.box-item {
height: 100%;
}
& .box-img {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
& img {
height: 340px;
width: 460px;
}
}
}
}
直接下载写好的内容,jquery实现简单的手风琴效果http://download.csdn.net/detail/ztj771299799/9688799