基于jQuery实现仿百度首页选项卡切换效果
更新时间:2016年05月29日 15:12:42 作者:roucheng
这篇文章主要介绍了基于jQuery实现仿百度首页选项卡切换效果的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧。
先给大家展示下效果图:
代码如下:
<!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>
以上内容是小编给大家介绍的基于jQuery实现仿百度首页选项卡切换效果,希望对大家有所帮助!
相关文章
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
本文将结合实例讲解如何使用一款基于jQuery的插件——Zclip来实现复制内容到剪贴板的功能。其实IE上有个方法可以实现点击复制,但是由于只是IE独有,所以我们不提倡。而Zclip是利用一个隐藏的flash文件来完成复制的功能,关键是它兼容当前各主流浏览器。2015-04-04JQERY limittext 插件0.2版(长内容限制显示)
JQERY limittext 插件为长内容增加一个显示更多的功能2010-08-08
最新评论