手风琴
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/new_file.css" />
<script src="jquery.min.js"></script>
</head>
<body>
<!--最大框开始-->
<div id="bigbox">
<!--第一张图开始-->
<div id="box1">
<div style="background: url(img/ruili_img1.jpg)no-repeat;height: 405px;position: relative;">
<div id="img1bottom">
<span id="img1word">给你15分钟做“对”的时尚人</span>
</div>
</div>
<div id="clothing">
<span id="clothings">服饰</span>
<ul>
<li><img src="img/logo.png" />封面明星故事</li>
<li><img src="img/logo.png" />2015春夏趋势</li>
<li><img src="img/logo.png" />我爱海淘</li>
<div style="clear: both;"></div>
</ul>
<div style="clear: both;"></div>
</div>
</div>
<!--第一张图结束-->
<!--第二张图开始-->
<div id="box2">
<div style="background: url(img/ruili_img2.jpg)no-repeat;height: 405px;position: relative;">
<div id="img1bottom">
<span id="img1word">蒂芙尼为你吟唱一曲自然颂</span>
</div>
</div>
<div id="clothing">
<span id="clothings">服饰</span>
<ul>
<li><img src="img/logo.png" />封面明星故事</li>
<li><img src="img/logo.png" />2015春夏趋势</li>
<li><img src="img/logo.png" />我爱海淘</li>
<div style="clear: both;"></div>
</ul>
<div style="clear: both;"></div>
</div>
</div>
<!--第二张图结束-->
<!--第三张图开始-->
<div id="box3">
<div style="background: url(img/ruili_img3.jpg)no-repeat;height: 405px;position: relative;">
<div id="img1bottom">
<span id="img1word">瑞丽·妆 线上精品轻杂志</span>
</div>
</div>
<div id="clothing">
<span id="clothings">服饰</span>
<ul>
<li><img src="img/logo.png" />封面明星故事</li>
<li><img src="img/logo.png" />2015春夏趋势</li>
<li><img src="img/logo.png" />我爱海淘</li>
<div style="clear: both;"></div>
</ul>
<div style="clear: both;"></div>
</div>
</div>
<!--第三张图结束-->
<!--第四张图开始-->
<div id="box4">
<div style="background: url(img/ruili_img4.jpg)no-repeat;height: 405px;position: relative;">
<div id="img1bottom">
<span id="img1word">《ar》刘海造型 女孩只需这样即刻焕然一新</span>
</div>
</div>
<div id="clothing">
<span id="clothings">服饰</span>
<ul>
<li><img src="img/logo.png" />封面明星故事</li>
<li><img src="img/logo.png" />2015春夏趋势</li>
<li><img src="img/logo.png" />我爱海淘</li>
<div style="clear: both;"></div>
</ul>
<div style="clear: both;"></div>
</div>
</div>
<!--第四张图结束-->
<!--第五张图开始-->
<div id="box5">
<div style="background: url(img/ruili_img5.jpg)no-repeat;height: 405px;position: relative;">
<div id="img1bottom">
<span id="img1word">电影×大明星 见证传奇从戛纳诞生</span>
</div>
</div>
<div id="clothing">
<span id="clothings">服饰</span>
<ul>
<li><img src="img/logo.png" />封面明星故事</li>
<li><img src="img/logo.png" />2015春夏趋势</li>
<li><img src="img/logo.png" />我爱海淘</li>
<div style="clear: both;"></div>
</ul>
<div style="clear: both;"></div>
</div>
</div>
<!--第五张图结束-->
<!--第六张图开始-->
<div id="box6">
<div style="background: url(img/ruili_img6.jpg)no-repeat;height: 405px;position: relative;">
<div id="img1bottom">
<span id="img1word">重返20岁试用周</span>
</div>
</div>
<div id="clothing">
<span id="clothings">服饰</span>
<ul>
<li><img src="img/logo.png" />封面明星故事</li>
<li><img src="img/logo.png" />2015春夏趋势</li>
<li><img src="img/logo.png" />我爱海淘</li>
<div style="clear: both;"></div>
</ul>
<div style="clear: both;"></div>
</div>
</div>
<!--第六张图结束-->
<!--第七张图开始-->
<div id="box7">
<div style="background: url(img/ruili_img7.jpg)no-repeat;height: 405px;position: relative;">
<div id="img1bottom">
<span id="img1word">玩美女孩盖天天 阳光女神进阶攻略</span>
</div>
</div>
<div id="clothing">
<span id="clothings">服饰</span>
<ul>
<li><img src="img/logo.png" />封面明星故事</li>
<li><img src="img/logo.png" />2015春夏趋势</li>
<li><img src="img/logo.png" />我爱海淘</li>
<div style="clear: both;"></div>
</ul>
<div style="clear: both;"></div>
</div>
</div>
<!--第七张图结束-->
</div><!--最大框结束-->
<script>
$("#bigbox").children("div").mouseenter(function() {
$(this).find("#img1word").parent().css({"display":"block"});
$(this).find("li").css({"display":"block"});
$(this).prevAll().next().stop().animate({right:'450px'},500);
$(this).nextAll().stop().animate({right:'0px'},500);
});
$("#bigbox").children("div").mouseleave(function() {
$(this).find("li").css({"display":"none"});
$(this).find("#img1word").parent().css({"display":"none"});
});
</script>
</body>
</html>
