标签：
<!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>
标签：
原文地址：http://www.cnblogs.com/wangyukun/p/4624155.html
