打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
jQuery游戏网站手风琴切换代码

<!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>适用浏览器:360FireFoxChromeSafariOpera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>

<p>来源:<a href="http://down.admin5.com/"target="_blank"> </a></p>

</div>

</body>

</html>

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
用iframe解决Applet遮挡菜单
span居左
列表做法
学会Twitter Bootstrap不再难
带下拉菜单的按钮
Mui框架一 快捷键 基础知识点
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服