基于jQuery、动感滑动、蓝色气魄威风凛凛的选项卡代码

发布时间：2018-08-25 21:05:56 所属栏目：创业来源：站长网

导读：基于jQuery、动感滑动、蓝色气魄威风凛凛的选项卡代码，鼠标移到菜单上之后，选项卡的配景动画滑动，内容随之调动，真的很不错的结果，假如您正规划计一律个蓝色气魄威风凛凛的网站而还没有大度的菜单时，那么就不消发愁了，赶忙用上吧。为办理一些网页殊效运行后不能表现

　　基于jQuery、动感滑动、蓝色气魄威风凛凛的选项卡代码，鼠标移到菜单上之后，选项卡的配景动画滑动，内容随之调动，真的很不错的结果，假如您正规划计一律个蓝色气魄威风凛凛的网站而还没有大度的菜单时，那么就不消发愁了，赶忙用上吧。

　　为办理一些网页殊效运行后不能表现结果（譬喻：jQuery则必要革新）题目，猛火出格新增网页版演示。

　　点击查察：网页殊效

　　运行演示：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滑动tab选项卡jQuery代码</title> <script src="/uploads/common/js/jquery-1.7.min.js"></script> <script> var msn = msn || {}; msn.hp = msn.hp || {}; msn.hp.tab = { t: null, delayTime: 150, fx: true, tab: function(b) { $(b).siblings().removeClass("on"); $(b).addClass("on"); var c = $(b).parents(".tab").find("div.t"); var a = c.eq($(b).index()); c.addClass("none"); a.removeClass("none"); if (this.fx) { if ($(b).parent().hasClass("nofx")) { return } $(b).parent().siblings(".animate").width($(b).outerWidth() - 2).animate({ left: $(b).position().left }, "slow") } }, delayTab: function(b, a) { clearTimeout(b.t); this.t = setTimeout(function() { b.tab(a) }, this.delayTime) }, init: function() { var a = this; a.animate(); if (window.Touch) { $(".tab .veryhuo_t>ul>li[class!='on']>a").click(function() { return false }) } $(".tab .veryhuo_t>ul>li,.tab>ul.hotread_menu>li").hover(function() { a.delayTab(a, this) }, function() { clearTimeout(a.t) }) }, animate: function() { if (!this.fx) { return } $(".tab .veryhuo_t>ul").each(function() { if (!$(this).hasClass("nofx")) { $(this).addClass("fx") } }); $(".tab .veryhuo_t").each(function(a, b) { if ($(this).find("ul").hasClass("nofx")) { return } $(b).append("<div class='animate' ></div>"); $(b).find(".animate").width($(b).find("ul>li.on").outerWidth() - 2).css("left", $(b).find("ul>li.on").position().left) }) } }; $(document).ready(function() { var a = msn.hp; a.tab.init(); }); </script> </style> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin: 0; padding: 0; } body,td,th { font-size: 12px; color: #333333; } body { background-color: #FFFFFF; } a:link { color: #333333; text-decoration: none; } a:visited { color: #333333; text-decoration: none; } a:hover { color: #990000; text-decoration: underline; } a:active { color: #990000; text-decoration: none; } --> ol,ul{ list-style: none; } .clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{ display: inline-block; } /* Hides from IE-mac */ * html .clearfix{ height: 1%; } .clearfix{ display: block; } /* End hide from IE-mac */ body{ font-size: 12px; font-family: "Microsoft Yahei" ,Tahoma, "SimSun"; color: #333; background: #fff; line-height: 1.5; } .main_l{ width: 513px; position: relative; float: left; } .veryhuo_t{ height: 28px; overflow: hidden; background: url(/uploads/allimg/1112/s3.png) 0 0 no-repeat; float: left; } .veryhuo_t ul{ font-size: 14px; } .veryhuo_t ul li{ height: 23px; line-height: 23px; padding-left: 16px; padding-right: 16px; padding-top: 1px; background: #f1f1f1; border-top: #fff 3px solid; border-left: #fff 1px solid; border-right: #fff 1px solid; float: left; } .veryhuo_t ul .on{ height: 22px; line-height: 22px; padding-left: 16px; padding-right: 16px; background: #fff; border-top: #009ad9 4px solid; border-left: #009ad9 1px solid; border-right: #009ad9 1px solid; border-bottom: #fff 1px solid; } .veryhuo_t ul .on a{ font-weight: 700; } .veryhuo_t span{ line-height: 24px; padding-top: 4px; padding-right: 10px; float: right; } .main_l .veryhuo_t{ width: 513px; overflow: hidden; } .main_l .main_content{ width: 513px; } .main_l .main_content .main_box{ width: 339px; overflow: hidden; float: left; } .main_l .main_content .main_box .list{ font-size: 14px; line-height: 26px; } .main_l .main_content .main_box .list ul{ padding: 8px 0; border-bottom: #e1e1e1 1px solid; width: 339px; overflow: hidden; } .main_l .main_content .main_box .list ul li{ padding-left: 25px; background: url(/uploads/allimg/1112/s3.png) 3px -300px no-repeat; width: 600px; } .main_l .main_content .main_box .list ul .v{ background: url(/uploads/allimg/1112/s3.png) 3px -330px no-repeat; } .main_l .main_content .main_box .list ul .top{ background: none; padding-left: 0; text-align: center; font-size: 14px; font-weight: 700; width: 339px; } .tab div.t.none{ display: none; } .tab .veryhuo_t ul.fx li{ background-color: transparent; } .tab .veryhuo_t ul.fx li, .tab .veryhuo_t ul.fx li.on{ border-top: 0; margin-top: 3px; padding-top: 0; } .tab .veryhuo_t ul.fx li.on{ border-left-color: transparent; border-right-color: transparent; border-bottom-width: 0; } .tab .veryhuo_t ul.fx{ z-index: 20; position: relative; } .tab .veryhuo_t div.animate{ height: 23px; position: absolute; top: 0; border-top: #009ad9 4px solid; border-left: #009ad9 1px solid; border-right: #009ad9 1px solid; border-bottom: #fff 1px solid; background-color: #fff; } </style> </head> <body> <div class="clearfix"> <div class="main_l tab"> <div class="veryhuo_t"> <ul class="fx"> <li class="">Tab1</li> <li><a href="http://www.veryhuo.com/">Tab2</a></li> <li><a href="#">Tab3</a></li> <li class="on"><a href="#">Tab4</a></li> </ul> <span><a href="#">更多>></a></span> <div class="animate" style="width: 60px; left: 186px;"></div> </div> <div class="main_content clearfix"> <div class="main_box t none"> <div class="list"> <ul> <li class="top">5张美男护士高清图片</li> <li>3D小人电视机PSD素材</li> <li>< 图标振动结果jQuery代码下载</li> <li>点击切换配景图片jQuery代码</li> <li>3D小人电视机PSD素材</li> <li>< 图标振动结果jQuery代码下载</li> <li>点击切换配景图片jQuery代码</li> <li>3D小人电视机PSD素材</li> <li>< 图标振动结果jQuery代码下载</li> </ul> </div> </div> <div class="main_box t none"> <div class="list"> <ul> <li class="top">3D小人电视机PSD素材</li> <li>3D小人电视机PSD素材</li> <li>< 图标振动结果jQuery代码下载</li> <li>点击切换配景图片jQuery代码</li> <li>3D小人电视机PSD素材</li> <li>< 图标振动结果jQuery代码下载</li> <li>点击切换配景图片jQuery代码</li> <li>3D小人电视机PSD素材</li> <li>< 图标振动结果jQuery代码下载</li> </ul> </div> </div> <div class="main_box t none"> <div class="list"> <ul> <li class="top"><a href="http://www.veryhuo.com/">点击切换配景图片jQuery代码</li> <li>3D小人电视机PSD素材</li> <li><a href="http://www.veryhuo.com/"> 图标振动结果jQuery代码下载</li> <li>点击切换配景图片jQuery代码</li> <li>3D小人电视机PSD素材</li> <li>< 图标振动结果jQuery代码下载</li> <li>点击切换配景图片jQuery代码</li> <li>3D小人电视机PSD素材</li> <li>< 图标振动结果jQuery代码下载</li> </ul> </div> </div> <div class="main_box t"> <div class="list"> <ul> <li class="top"><a href="#">图标振动结果jQuery代码下载</li> <li>3D小人电视机PSD素材</li> <li>< 图标振动结果jQuery代码下载</li> <li>点击切换配景图片jQuery代码</li> <li>3D小人电视机PSD素材</li> <li>< 图标振动结果jQuery代码下载</li> <li>点击切换配景图片jQuery代码</li> <li>3D小人电视机PSD素材</li> <li>< 图标振动结果jQuery代码下载</li> </ul> </div> </div> </div> </div> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如