jquery特效分享-一款基于jQuery的仿百度首页滑动选项卡

概述今天给大家分享一款基于jQuery的仿百度首页滑动选项卡。这款选项卡适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：实现的代码。html代码：

今天给大家分享1款基于jquery的仿百度首页滑动选项卡。这款选项卡适用阅读器：ie8、360、firefox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图以下：

实现的代码。

HTML代码：

<div class="main-page"> ="left"> ="nav-back"</div="nav"> ="on"> 导航> 新闻> 世界杯> 音乐> 彩票="right"="content-back"="content"> 站长素材1> 站长素材2> 站长素材3> 站长素材4> 站长素材5="clear"> >

CSS代码：

body { background: url(images/65.jpg) no-repeat fixed center center; } .clear { clear: both; } .main-page { margin: 200px auto 0 auto; wIDth: 700px; height: 300px; } .main-page .left,.main-page .right { float: left; } .main-page .nav-back { 60px; 300px; #000; opacity: .3; filter: Alpha(opacity=30); } .main-page .nav { position: relative; margin-top: ⑶00px; text-align: center; Font-size: 14px; Font-family: "微软雅黑"; color: #fff; } .main-page .nav div { 32px; line-height: 28px; } .main-page .nav div.on { #0094ea; } .main-page .right { 620px; margin-left: 20px; } .main-page .content-back { #fff; .3; } .main-page .content { 600px; 280px; padding: 10px; overflow: hIDden; } .main-page .content div { margin-bottom: #fff; }

Js代码：

$(".main-page .nav div").mouseenter(function () { var $this = $(this); var index = $this.index(); }).mouseleave(this.index(); }).click(this.index(); var l = -(index * 290); $(".main-page .nav div").removeClass("on"); $(".main-page .nav div").eq(index).addClass("on"); $(".main-page .content div:eq(0)").stop().animate({ "margin-top": l },500); });

其他精彩文章

jquery教程(29)-jquery插件开发之为插件方法指定参数jquery教程(28)-jquery插件开发之使用插件jquery教程(27)-jqueryAJAX *** 作之修改默许选项jquery教程(26)-AJAX *** 作之使用JsONP加载远程数据jquery教程(25)-AJAX *** 作之安全限制
总结

以上是内存溢出为你收集整理的jquery特效分享-一款基于jQuery的仿百度首页滑动选项卡全部内容，希望文章能够帮你解决jquery特效分享-一款基于jQuery的仿百度首页滑动选项卡所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。