<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.shaxiangift.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.sxdscyy.com/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>jQuery游戏网站手风琴切换代码</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: '微软雅黑';}
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 .p2span{display: block;font-weight: bold;font-size: 20px;}
.dh ul li .layer .p1 b,.dh ul li .layer .p1span{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>
<liclass="curr">
<ahref="javascript:;"><img src="images/datouwang1.jpg"alt=""></a>
<divclass="layer">
<pclass="p1"><b class="col1">胜率</b><spanclass="col2">NO.1</span></p>
<pclass="p2"><b class="col2">墨子</b><span class="col1">胜率NO.1</span></p>
</div>
</li>
<li>
<ahref="javascript:;"><img src="images/datouwang2.jpg"alt=""></a>
<div class="layer">
<pclass="p1"><b class="col1">出厂</b><spanclass="col2">NO.1</span></p>
<pclass="p2"><b class="col2">董卓</b><span class="col1">胜率NO.1</span></p>
</div>
</li>
<li>
<ahref="javascript:;"><img src="images/datouwang3.jpg"alt=""></a>
<div class="layer">
<p class="p1"><bclass="col1">MVP</b><spanclass="col2">NO.1</span></p>
<pclass="p2"><b class="col2">大头网</b><span class="col1">胜率NO.1</span></p>
</div>
</li>
<li>
<ahref="javascript:;"><img src="images/datouwang4.jpg"alt=""></a>
<div class="layer">
<pclass="p1"><b class="col1">场均击杀</b><spanclass="col2">NO.1</span></p>
<pclass="p2"><b class="col2">袁术</b><span class="col1">胜率NO.1</span></p>
</div>
</li>
<li>
<ahref="javascript:;"><img src="images/datouwang5.jpg"alt=""></a>
<div class="layer">
<pclass="p1"><b class="col1">场均助攻</b><spanclass="col2">NO.1</span></p>
<pclass="p2"><b class="col2">张郃</b><span class="col1">胜率NO.1</span></p>
</div>
</li>
<li>
<ahref="javascript:;"><img src="images/datouwang6.jpg"alt=""></a>
<div class="layer">
<pclass="p1"><b class="col1">场均补刀</b><spanclass="col2">NO.1</span></p>
<pclass="p2"><b class="col2">黄舞蝶</b><span class="col1">胜率NO.1</span></p>
</div>
</li>
<li>
<ahref="javascript:;"><img src="images/datouwang3.jpg"alt=""></a>
<div class="layer">
<pclass="p1"><b class="col1">场均金钱</b><spanclass="col2">NO.1</span></p>
<pclass="p2"><b class="col2">姜维</b><span class="col1">胜率NO.1</span></p>
</div>
</li>
</ul>
</div>
<script src="js/jquery.js"></script>
<scripttype="text/javascript">
$(function(){
// 初始化 第一个状态
jQuery('.dh ulli.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>
<divstyle="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoftYaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源:<a href="http://down.admin5.com/"target="_blank"> </a></p>
</div>
</body>
</html>
联系客服