您的位置：首页 > Web前端 > JQuery

7月3日 学习仿腾讯游戏首页小幻灯片jquery插件

2015-07-06 13:20 686 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title>

<style> img{border:0px;font-size:0;}

.banner{position:relative;width:960px;height:170px;overflow:hidden;margin:1px auto;} .mybox{ height: 100%;width: 200%;overflow: hidden;position: absolute;right: 0;top: 0;} .mybox .fPics{position:relative;float:right;height:100%;width:39%;background:#F3F9F8;} .mybox .fPics a{position:absolute;width:748px;height:100%;display:block;overflow:hidden;top:0;right:0;opacity:0;z-index:1;} .mybox .fPics a img{display: block;height: 100%;position: absolute;right: 0;top: 0;width: auto;z-index: 2;} .mybox .fBtns{position:relative;float:right;height:100%;width:11%;background:#F4F4F4;}

/*banner自身左边导航样式*/ .fBtns,.fBtns li{ margin: 0;padding: 0;list-style-type:none;vertical-align:top;} .mybox .fBtns li a{ display: block;overflow:hidden;} .mybox .fBtns li{position:relative;height:20%;} .fBtns .span-bg,.fBtns .span-text{ font-size: 14px; line-height: 34px; text-indent: 16px; display:block; position:absolute;top:0;left:0;z-index:1; width: 100%;overflow:hidden; white-space: nowrap} .mybox .fBtns li .span-bg{ width:4px;z-index:2;} .mybox .fBtns .span-text{color: #666; } .mybox .fBtns li .span-bg{ color: #fff;}

.mybox .fBtns li.rli1 .span-bg{ background-color:#FF4E00;} .mybox .fBtns li.rli2 .span-bg{ background-color:#FFC502;} .mybox .fBtns li.rli3 .span-bg{background-color:#4C8502;} .mybox .fBtns li.rli4 .span-bg{ background-color:#009CFF;} .mybox .fBtns li.rli5 .span-bg{ background-color:#A19FEA;} </style>

</head> <body>

<div class="banner" id="myBanner"> <div class="mybox"> <div class="fPics"> <a href="" style="opacity: 1; display: block"><img src="1.jpg"/></a> <a href=""><img src="http://51xuediannao.com/js/jquery/gameQq/2.jpg"/></a> <a href=""><img src="http://51xuediannao.com/js/jquery/gameQq/3.jpg"/></a> <a href=""><img src="http://51xuediannao.com/js/jquery/gameQq/4.jpg"/></a> <a href=""><img src="http://51xuediannao.com/js/jquery/gameQq/5.jpg"/></a> </div> <ul class="fBtns"> <li class="rli1"> <a href="http://www.51xuediannao.com/qqkefu/"> <span class="span-bg" style="width: 100%">qq在线客服代码</span> <span class="span-text">qq在线客服代码</span> </a> </li> <li class="rli2"> <a href="http://www.51xuediannao.com/"> <span class="span-bg">懒人建站</span> <span class="span-text">懒人建站</span> </a> </li> <li class="rli3"> <a href="http://www.51xuediannao.com/js/jquery/"> <span class="span-bg">jquery插件</span> <span class="span-text">jquery插件</span> </a> </li> <li class="rli4"> <a href="http://www.51xuediannao.com/js/"> <span class="span-bg">JAVASCRIPT</span> <span class="span-text">JAVASCRIPT</span> </a> </li> <li class="rli5"> <a href="http://www.51xuediannao.com/host/"> <span class="span-bg">免备案虚拟主机</span> <span class="span-text">免备案虚拟主机</span> </a> </li> </ul> </div> </div>

<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script> <script>

$.fn.gameQq = function(){ var $this = $(this), $btn = $this.find(".fBtns"), $img = $this.find(".fPics");

function Bmove($oBtn,$oImg){ this.btn=$oBtn.find("li"); this.img=$oImg.find("a"); this.show(); } Bmove.prototype={ show:function(){ var thb=this; this.btn.each(function(i){ $(this).mouseenter(function(){ thb.btn.find(".span-bg").stop().animate({"width":"4px"}); $(this).find(".span-bg").stop().animate({"width":"100%"}); thb.img.eq(i).stop().animate({"opacity":"1","z-index":2}); thb.img.eq(i).siblings("a").stop().animate({"opacity":"0","z-index":1}); return false; }) }) } };

return this.each(function(){ new Bmove($btn,$img); }) };

//调用 $("#myBanner").gameQq();

</script> </body> </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航