検索

ホームページ  >  記事  >  ウェブフロントエンド  >  ダイナミックエフェクトTABタブjquery plug-in_jquery

ダイナミックエフェクトTABタブjquery plug-in_jquery

WBOY
WBOYオリジナル
2016-05-16 18:05:10837ブラウズ

エフェクト画像:
ダイナミックエフェクトTABタブjquery plug-in_jquery
ダイナミックエフェクトTABタブjqueryプラグイン

コードをコピー コードは次のとおりです





無題ドキュメント












へへ


🎜>
スタイル:




コードをコピー


コードは次のとおりです:


@charset "utf-8";
/* CSS ドキュメント */
#hot {
height: 565px;
overflow: hidden;
} display:ブロック; } .clearfix::after { コンテンツ: "."; 高さ: 0; 可視性:非表示;
}
ul {
リストスタイル: 外側なし;
ボディ {
行の高さ: 1.5;
a, a :link, a:visited {
color: #333333;
text-decoration: none;
a:hover {
color: #FF6600;なし;
}
.main {
パディング: 0 10px 0 167px;
幅: 823px;
float : 左;
幅: 513px;
.main_r {
位置: 相対; >}
.main_title {
背景: url("images/s.png") 繰り返しなしスクロール 0 0 透明;
高さ: 28px;非表示;
}
.main_title {
font-size: 14px;
}
.main_title ul li {
background: none 繰り返しスクロール 0 0 #F1F1F1;ボーダー左: 1 ピクセルのソリッド # FFFFFF;
ボーダー上: 3 ピクセルのソリッド #FFFFFF;
高さ: 23 ピクセル;行の高さ: 23px;
パディング左: 16px;
パディングトップ: 1px;
.main_title ul .on {
: なし 繰り返しスクロール 0 0 # FFFFFF;
ボーダーカラー: #009AD9 #009AD9 #FFFFFF;
ボーダー幅: 4px 1px 1px;
line-height: 22px;
padding-left: 16px;
}
.main_title .on a {
font-weight: 700;
}
.main_title スパン {
float: right;
padding-right: 10px; }
.main_l .main_title {
オーバーフロー: 非表示;
幅: 513px;
}
.main_l .main_content {
幅: 513px;
。 tab div.t.none {
表示: なし;
}
.tab .main_title ul.fx li, #link .main_l .main_title ul.fx li {
背景色: 透明;
}
.tab .main_title ul.fx li, .tab .main_title ul.fx li.on {
border-top: 0 none;
margin-top: -8px;パディングトップ: 0;
}
.tab .main_title ul.fx li.on {
ボーダーボトム幅: 0;
ボーダー左色: 透明; -right-color: 透明;
}
.tab .main_title ul.fx {
位置: 相対;
}
.tab .main_title div .animate {
背景色 : #FFFFFF;
境界線の色: #009AD9 #009AD9 #FFFFFF;
境界線の幅: 4px 1px 1px;高さ: 23px;
位置: 絶対;
}


タブ选项卡 源代：
复制代 代码如下:

/*
* タブ 1.0
* 日付: 2011-07-09 15:29
* http://zengxiangzhan.cnblogs.com/
*/
var zeng = zeng || {};
zeng.tab = {
t: null,
layTime: 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
}, "遅い" )
}
},
layTab: function(b, a) {
clearTimeout(b.t);
this.t = setTimeout(function() {
b.tab(a)
}, this.layTime)
},
init: function() {
var a = これ;
a.animate();
if (window.Touch) {
$(".tab .main_title>ul>li[class!='on']>a").click(function() {
return false
})
}
$(".tab .main_title>ul>li,.tab>ul.hotread_menu>li").hover(function() {
a.layTab(a, this )
}, function() {
clearTimeout(a.t)
})
},
animate: function() {
if (!this.fx) {
return
}
$(".tab .main_title>ul").each(function() {
if (!$(this).hasClass("nofx")) {
$( this).addClass("fx")
}
});
$(".tab .main_title").each(function(a, b) {
if ($(this).find("ul").hasClass("nofx")) {
return
}
$(b).append("
");
$(b).find(".animate")。 width($(b).find("ul>li.on").outerWidth() - 2).css("left", $(b).find("ul>li.on").position() .left)
})
}
};

作者：曾祥展
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：初心者向けjs挿入ノードappendChild insertBefore使い方メソッド_javascriptスキル次の記事：初心者向けjs挿入ノードappendChild insertBefore使い方メソッド_javascriptスキル

関連記事

続きを見る