|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-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 .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="images/datouwang1.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="images/datouwang2.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="images/datouwang3.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="images/datouwang4.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="images/datouwang5.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="images/datouwang6.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="images/datouwang3.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="js/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> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://down./" target="_blank"> </a></p> </div> </body> </html> |
|
|
来自： 昵称48806104 > 《文件夹1》
