基于jQuery、动感滑动、蓝色风格的选项卡代码,鼠标移到菜单上之后,选项卡的背景动画滑动,内容随之变换,真的很不错的效果,如果您正打算设计一个蓝色风格的网站而还没有漂亮的菜单时,那么就不用发愁了,赶紧用上吧。 为解决一些网页特效运行后不能显示效果(例如:jQuery则需要刷新)问题,烈火特别新增网页版演示。 点击查看:网页特效 运行演示: <!DOCTYPE html><br /> <html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>滑动tab选项卡jQuery代码</title><br /> <script src="/uploads/common/js/jquery-1.7.min.js"></script><br /> <script><br /> var msn = msn || {};<br /> msn.hp = msn.hp || {};<br /> msn.hp.tab = {<br /> t: null,<br /> delayTime: 150,<br /> fx: true,<br /> tab: function(b) {<br /> $(b).siblings().removeClass("on");<br /> $(b).addClass("on");<br /> var c = $(b).parents(".tab").find("div.t");<br /> var a = c.eq($(b).index());<br /> c.addClass("none");<br /> a.removeClass("none");<br /> if (this.fx) {<br /> if ($(b).parent().hasClass("nofx")) {<br /> return<br /> }<br /> $(b).parent().siblings(".animate").width($(b).outerWidth() - 2).animate({<br /> left: $(b).position().left<br /> },<br /> "slow")<br /> }<br /> },<br /> delayTab: function(b, a) {<br /> clearTimeout(b.t);<br /> this.t = setTimeout(function() {<br /> b.tab(a)<br /> },<br /> this.delayTime)<br /> },<br /> init: function() {<br /> var a = this;<br /> a.animate();<br /> if (window.Touch) {<br /> $(".tab .veryhuo_t>ul>li[class!='on']>a").click(function() {<br /> return false<br /> })<br /> }<br /> $(".tab .veryhuo_t>ul>li,.tab>ul.hotread_menu>li").hover(function() {<br /> a.delayTab(a, this)<br /> },<br /> function() {<br /> clearTimeout(a.t)<br /> })<br /> },<br /> animate: function() {<br /> if (!this.fx) {<br /> return<br /> }<br /> $(".tab .veryhuo_t>ul").each(function() {<br /> if (!$(this).hasClass("nofx")) {<br /> $(this).addClass("fx")<br /> }<br /> });<br /> $(".tab .veryhuo_t").each(function(a, b) {<br /> if ($(this).find("ul").hasClass("nofx")) {<br /> return<br /> }<br /> $(b).append("<div class='animate' ></div>");<br /> $(b).find(".animate").width($(b).find("ul>li.on").outerWidth() - 2).css("left", $(b).find("ul>li.on").position().left)<br /> })<br /> }<br /> };<br /> $(document).ready(function() {<br /> var a = msn.hp;<br /> a.tab.init();<br /> });<br /> </script><br /> </style><br /> <style><br /> 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{<br /> margin: 0;<br /> padding: 0;<br /> }<br /> body,td,th {<br /> font-size: 12px;<br /> color: #333333;<br /> }<br /> body {<br /> background-color: #FFFFFF;<br /> }<br /> a:link {<br /> color: #333333;<br /> text-decoration: none;<br /> }<br /> a:visited {<br /> color: #333333;<br /> text-decoration: none;<br /> }<br /> a:hover {<br /> color: #990000;<br /> text-decoration: underline;<br /> }<br /> a:active {<br /> color: #990000;<br /> text-decoration: none;<br /> }<br /> --><br /> ol,ul{<br /> list-style: none;<br /> }<br /> .clearfix:after{<br /> content: ".";<br /> display: block;<br /> height: 0;<br /> clear: both;<br /> visibility: hidden;<br /> }<br /> .clearfix{<br /> display: inline-block;<br /> }<br /> /* Hides from IE-mac \*/<br /> * html .clearfix{<br /> height: 1%;<br /> }<br /> .clearfix{<br /> display: block;<br /> }<br /> /* End hide from IE-mac */<br /> body{<br /> font-size: 12px;<br /> font-family: "Microsoft Yahei" ,Tahoma, "SimSun";<br /> color: #333;<br /> background: #fff;<br /> line-height: 1.5;<br /> }<br /> .main_l{<br /> width: 513px;<br /> position: relative;<br /> float: left;<br /> }<br /> .veryhuo_t{<br /> height: 28px;<br /> overflow: hidden;<br /> background: url(/uploads/allimg/1112/s3.png) 0 0 no-repeat;<br /> float: left;<br /> }<br /> .veryhuo_t ul{<br /> font-size: 14px;<br /> }<br /> .veryhuo_t ul li{<br /> height: 23px;<br /> line-height: 23px;<br /> padding-left: 16px;<br /> padding-right: 16px;<br /> padding-top: 1px;<br /> background: #f1f1f1;<br /> border-top: #fff 3px solid;<br /> border-left: #fff 1px solid;<br /> border-right: #fff 1px solid;<br /> float: left;<br /> }<br /> .veryhuo_t ul .on{<br /> height: 22px;<br /> line-height: 22px;<br /> padding-left: 16px;<br /> padding-right: 16px;<br /> background: #fff;<br /> border-top: #009ad9 4px solid;<br /> border-left: #009ad9 1px solid;<br /> border-right: #009ad9 1px solid;<br /> border-bottom: #fff 1px solid;<br /> }<br /> .veryhuo_t ul .on a{<br /> font-weight: 700;<br /> }<br /> .veryhuo_t span{<br /> line-height: 24px;<br /> padding-top: 4px;<br /> padding-right: 10px;<br /> float: right;<br /> }<br /> .main_l .veryhuo_t{<br /> width: 513px;<br /> overflow: hidden;<br /> }<br /> .main_l .main_content{<br /> width: 513px;<br /> }<br /> .main_l .main_content .main_box{<br /> width: 339px;<br /> overflow: hidden;<br /> float: left;<br /> }<br /> .main_l .main_content .main_box .list{<br /> font-size: 14px;<br /> line-height: 26px;<br /> }<br /> .main_l .main_content .main_box .list ul{<br /> padding: 8px 0;<br /> border-bottom: #e1e1e1 1px solid;<br /> width: 339px;<br /> overflow: hidden;<br /> }<br /> .main_l .main_content .main_box .list ul li{<br /> padding-left: 25px;<br /> background: url(/uploads/allimg/1112/s3.png) 3px -300px no-repeat;<br /> width: 600px;<br /> }<br /> .main_l .main_content .main_box .list ul .v{<br /> background: url(/uploads/allimg/1112/s3.png) 3px -330px no-repeat;<br /> }<br /> .main_l .main_content .main_box .list ul .top{<br /> background: none;<br /> padding-left: 0;<br /> text-align: center;<br /> font-size: 14px;<br /> font-weight: 700;<br /> width: 339px;<br /> }<br /> .tab div.t.none{<br /> display: none;<br /> }<br /> .tab .veryhuo_t ul.fx li{<br /> background-color: transparent;<br /> }<br /> .tab .veryhuo_t ul.fx li, .tab .veryhuo_t ul.fx li.on{<br /> border-top: 0;<br /> margin-top: 3px;<br /> padding-top: 0;<br /> }<br /> .tab .veryhuo_t ul.fx li.on{<br /> border-left-color: transparent;<br /> border-right-color: transparent;<br /> border-bottom-width: 0;<br /> }<br /> .tab .veryhuo_t ul.fx{<br /> z-index: 20;<br /> position: relative;<br /> }<br /> .tab .veryhuo_t div.animate{<br /> height: 23px;<br /> position: absolute;<br /> top: 0;<br /> border-top: #009ad9 4px solid;<br /> border-left: #009ad9 1px solid;<br /> border-right: #009ad9 1px solid;<br /> border-bottom: #fff 1px solid;<br /> background-color: #fff;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div class="clearfix"><br /> <div class="main_l tab"><br /> <div class="veryhuo_t"><br /> <ul class="fx"><br /> <li class="">Tab1</li><br /> <li><a href="http://www.veryhuo.com/">Tab2</a></li><br /> <li><a href="#">Tab3</a></li><br /> <li class="on"><a href="#">Tab4</a></li><br /> </ul><br /> <span><a href="#">更多>></a></span><br /> <div class="animate" style="width: 60px; left: 186px;"></div><br /> </div><br /> <div class="main_content clearfix"><br /> <div class="main_box t none"><br /> <div class="list"><br /> <ul><br /> <li class="top">5张美女护士高清图片</li><br /> <li>3D小人电视机PSD素材</li><br /> <li>< 图标振动效果jQuery代码下载</li><br /> <li>点击切换背景图片jQuery代码</li><br /> <li>3D小人电视机PSD素材</li><br /> <li>< 图标振动效果jQuery代码下载</li><br /> <li>点击切换背景图片jQuery代码</li><br /> <li>3D小人电视机PSD素材</li><br /> <li>< 图标振动效果jQuery代码下载</li><br /> </ul><br /> </div><br /> </div><br /> <div class="main_box t none"><br /> <div class="list"><br /> <ul><br /> <li class="top">3D小人电视机PSD素材</li><br /> <li>3D小人电视机PSD素材</li><br /> <li>< 图标振动效果jQuery代码下载</li><br /> <li>点击切换背景图片jQuery代码</li><br /> <li>3D小人电视机PSD素材</li><br /> <li>< 图标振动效果jQuery代码下载</li><br /> <li>点击切换背景图片jQuery代码</li><br /> <li>3D小人电视机PSD素材</li><br /> <li>< 图标振动效果jQuery代码下载</li><br /> </ul><br /> </div><br /> </div><br /> <div class="main_box t none"><br /> <div class="list"><br /> <ul><br /> <li class="top"><a href="http://www.veryhuo.com/">点击切换背景图片jQuery代码</li><br /> <li>3D小人电视机PSD素材</li><br /> <li><a href="http://www.veryhuo.com/"> 图标振动效果jQuery代码下载</li><br /> <li>点击切换背景图片jQuery代码</li><br /> <li>3D小人电视机PSD素材</li><br /> <li>< 图标振动效果jQuery代码下载</li><br /> <li>点击切换背景图片jQuery代码</li><br /> <li>3D小人电视机PSD素材</li><br /> <li>< 图标振动效果jQuery代码下载</li><br /> </ul><br /> </div><br /> </div><br /> <div class="main_box t"><br /> <div class="list"><br /> <ul><br /> <li class="top"><a href="#">图标振动效果jQuery代码下载</li><br /> <li>3D小人电视机PSD素材</li><br /> <li>< 图标振动效果jQuery代码下载</li><br /> <li>点击切换背景图片jQuery代码</li><br /> <li>3D小人电视机PSD素材</li><br /> <li>< 图标振动效果jQuery代码下载</li><br /> <li>点击切换背景图片jQuery代码</li><br /> <li>3D小人电视机PSD素材</li><br /> <li>< 图标振动效果jQuery代码下载</li><br /> </ul><br /> </div><br /> </div><br /> </div><br /> </div><br /> </div><br /> </body><br /> </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>提示:可修改后代码再运行! 文章导航 jQuery滑动门列表布局,字体会变大变色大幅的下拉菜单代码,来自微软官方网站