仿百度首页选项卡切换效果
效果：
http://hovertree.com/texiao/jquery/71/
代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title> <base target="_blank" /> <style type="text/css"> body { background: url(http://hovertree.com/texiao/jquery/71/images/65.jpg) no-repeat fixed center center; } .hovertreepage .clear { clear: both; } .hovertreepage { margin: 200px auto 0 auto; width: 700px; height: 300px; } .hovertreepage .left, .hovertreepage .right { float: left; } .hovertreepage .nav-back { width: 60px; height: 300px; background: #000; opacity: .3; filter: alpha(opacity=30); } .hovertreepage .nav { position: relative; margin-top: -300px; width: 60px; text-align: center; font-size: 14px; font-family: "微软雅黑"; color: #fff; } .hovertreepage .nav div { height: 32px; line-height: 28px; cursor:pointer; } .hovertreepage .nav div.on { background: #0094ea; } .hovertreepage .right { width: 620px; height: 300px; margin-left: 20px; } .hovertreepage .content-back { width: 620px; height: 300px; background: #fff; opacity: .3; } .hovertreepage .content { position: relative; width: 600px; height: 280px; margin-top: -300px; padding: 10px; overflow: hidden; } .hovertreepage .content a{color:blue;} .hovertreepage .content div { width: 600px; height: 280px; margin-bottom: 10px; background: #fff; } </style> </head> <body> <div class="hovertreepage"> <div class="left"> <div class="nav-back"></div> <div class="nav"> <div class="on">导航</div> <div>新闻</div> <div>世界杯</div> <div>音乐</div> <div>彩票</div> </div> </div> <div class="right"> <div class="content-back"></div> <div class="content"> <div>1 <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/n781jmfy.htm">原文</a> </div> <div>2 </div> <div>3 <a href="http://hovertree.com/texiao/jquery/70/color.htm">服装店风云</a> 自从接触编程以后，兴趣就一直有增无减。</div> <div>4 <a href="http://hovertree.com/h/bjaf/ati6k7yk.htm">jQuery全部版本下载</a> 时间就是金钱，效率就是生命。 </div> <div>5 <a href="http://hovertree.com/texiao/html5/30/"><img src="http://hovertree.com/hvtimg/bjafjd/wmt3mxd7.png" alt="孙悟空" /></a></div> </div> </div> <div class="clear"></div> </div> <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script> <script type="text/javascript"> $(".hovertreepage .nav div").mouseenter(function () { var $this = $(this); var index = $this.index(); }).mouseleave(function () { var $this = $(this); var index = $this.index(); }).click(function () { var $this = $(this); var index = $this.index(); var l = -(index * 290); $(".hove"+"rtreepage .nav div").removeClass("on"); $(".hovertreepage .nav div").eq(index).addClass("on"); $(".hovertreepage .content div:eq(0)").stop().animate({ "margin-top": l }, 500); }); </script> </body> </html>
