<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul li,ul ol{list-style: none;}
i,b,em,strong{font-style: normal;}
body{font-family: '微软雅黑';background: #222;}
img{display: block;}
.dh ul{position: relative;overflow: hidden;width: 910px;height: 306px;margin: 60px auto 0;}
.dh ul li{float: left;width: 108px;overflow: hidden;height: 100%;position: relative;cursor: pointer;}
.dh ul li a{display: block;width: 100%;height: 100%;}
.dh ul li .layer{position: absolute;bottom: 0;left: 0;width: 100%;background:rgba(27,29,36,0.75);height: 100%;}
.dh ul li .layer .p1{position: absolute;bottom: 5px;left: 10px;}
.dh ul li .layer .p2{position: absolute;bottom: 5px;right: -200%;}
.dh ul li .layer .p2 b,.dh ul li .layer .p2 span{display: block;font-weight: bold;font-size: 20px;}
.dh ul li .layer .p1 b,.dh ul li .layer .p1 span{display: block;font-weight: bold;font-size: 14px;}
.dh ul li.curr{}
/* .dh ul li.curr .layer .p1{left: -200%;}
.dh ul li.curr .layer .p2{left: 10px;} */
.col1{color: #00A39A;}
.col2{color: #fff;}
</style>
</head>
<body>
<div class="dh sfq">
<ul>
<li class="curr">
<a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/DH13.jpg" alt=""></a>
<div class="layer">
<p class="p1"><b class="col1">胜率</b><span class="col2">NO.1</span></p>
<p class="p2"><b class="col2">墨子</b><span class="col1">胜率NO.1</span></p>
</div>
</li>
<li>
<a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U072.jpg" alt=""></a>
<div class="layer">
<p class="p1"><b class="col1">出厂</b><span class="col2">NO.1</span></p>
<p class="p2"><b class="col2">董卓</b><span class="col1">胜率NO.1</span></p>
</div>
</li>
<li>
<a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U063.jpg" alt=""></a>
<div class="layer">
<p class="p1"><b class="col1">MVP</b><span class="col2">NO.1</span></p>
<p class="p2"><b class="col2">黄舞蝶</b><span class="col1">胜率NO.1</span></p>
</div>
</li>
<li>
<a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U098.jpg" alt=""></a>
<div class="layer">
<p class="p1"><b class="col1">场均击杀</b><span class="col2">NO.1</span></p>
<p class="p2"><b class="col2">袁术</b><span class="col1">胜率NO.1</span></p>
</div>
</li>
<li>
<a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U070.jpg" alt=""></a>
<div class="layer">
<p class="p1"><b class="col1">场均助攻</b><span class="col2">NO.1</span></p>
<p class="p2"><b class="col2">张郃</b><span class="col1">胜率NO.1</span></p>
</div>
</li>
<li>
<a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U063.jpg" alt=""></a>
<div class="layer">
<p class="p1"><b class="col1">场均补刀</b><span class="col2">NO.1</span></p>
<p class="p2"><b class="col2">黄舞蝶</b><span class="col1">胜率NO.1</span></p>
</div>
</li>
<li>
<a href="javascript:;"><img src="http://static.m3guo.com/m3guo/v2/images/heros/tskill/U068.jpg" alt=""></a>
<div class="layer">
<p class="p1"><b class="col1">场均金钱</b><span class="col2">NO.1</span></p>
<p class="p2"><b class="col2">姜维</b><span class="col1">胜率NO.1</span></p>
</div>
</li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
// 初始化 第一个 状态
jQuery('.dh ul li.curr').animate({width:'246px'},'slow');
jQuery('.dh ul li.curr .layer').animate({height:'60px'},'slow');
jQuery('.dh ul li.curr .layer .p1').animate({left:'-200%'},'slow');
jQuery('.dh ul li.curr .layer .p2').animate({right:'145px'},'slow');
jQuery('.sfq ul li').hover(function(){
// 获取索引
var _index = $(this).index();
$(this).addClass('curr')
.stop()
.animate({
width:'246px'
},'slow')
.siblings()
.stop()
.animate({
width:'108px'
},'slow')
.removeClass('curr');
$(this).find('.layer').stop().animate({height:'60px'},'slow').parent().siblings().find('.layer').stop().animate({
height: '100%'
},'slow');
$(this).find('.layer .p1').stop().animate({left:'-200%'},'slow').siblings('.p2').stop().animate({
right: '145px'
},'slow').parent().parent().siblings().find('.layer .p1').stop().animate({left:'10px'},'slow').siblings('.p2').stop().animate({
right: '-200%'
},'slow')
},function(){
//移出
})
});
</script>
</body>
</html>
转载自:http://www.qdfuns.com/notes/17946/045eec9223a894c1ea0f4a99ef5ac902.html
手风琴图片切换效果
最新推荐文章于 2022-06-24 16:52:49 发布