欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

動(dòng)感效果的TAB選項(xiàng)卡jquery 插件

 更新時(shí)間：2011年07月09日 23:13:57   作者：  
動(dòng)感效果的TAB選項(xiàng)卡jquery 插件,需要的朋友可以參考下。
效果圖:

動(dòng)感效果的TAB選項(xiàng)卡 jquery 插件
復(fù)制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<link href="tab.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="tab.js"></script>
<script type="text/javascript">
$(function() {
zeng.tab.init();
});
</script>
</head>
<body>
<div class="clearfix" id="hot">
<div class="main_l tab">
<div class="main_title clearfix">
<ul class="fx">
<li class="on"><a href="#">你是gril</a></li>
<li class="">我是boy</li>
</ul>
</div>
<div class="t">
<div class="main_content clearfix">
我在香格里拉
</div>
</div>
<div class="t none">
<div class="main_content clearfix">
呵呵
</div>
</div>
</div>
</div>
</body>
</html>

樣式：
復(fù)制代碼 代碼如下:

@charset "utf-8";
/* CSS Document */
#hot {
height: 565px;
overflow: hidden;
}
.clearfix {
display: block;
}
.clearfix::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ul {
list-style: none outside none;
}
body {
line-height: 1.5;
}
a, a:link, a:visited {
color: #333333;
text-decoration: none;
}
a:hover {
color: #FF6600;
text-decoration: none;
}
.main {
padding: 0 10px 0 167px;
position: relative;
width: 823px;
}
.main_l {
float: left;
position: relative;
width: 513px;
}
.main_r {
float: right;
position: relative;
width: 300px;
}
.main_title {
background: url("images/s.png") no-repeat scroll 0 0 transparent;
float: left;
height: 28px;
overflow: hidden;
}
.main_title ul {
font-size: 14px;
}
.main_title ul li {
background: none repeat scroll 0 0 #F1F1F1;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-top: 3px solid #FFFFFF;
float: left;
height: 23px;
line-height: 23px;
padding-left: 16px;
padding-right: 16px;
padding-top: 1px;
}
.main_title ul .on {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #009AD9 #009AD9 #FFFFFF;
border-style: solid;
border-width: 4px 1px 1px;
height: 22px;
line-height: 22px;
padding-left: 16px;
padding-right: 16px;
}
.main_title ul .on a {
font-weight: 700;
}
.main_title span {
float: right;
line-height: 24px;
padding-right: 10px;
padding-top: 4px;
}
.main_l .main_title {
overflow: hidden;
width: 513px;
}
.main_l .main_content {
width: 513px;
}
.tab div.t.none {
display: none;
}
.tab .main_title ul.fx li, #link .main_l .main_title ul.fx li {
background-color: transparent;
}
.tab .main_title ul.fx li, .tab .main_title ul.fx li.on {
border-top: 0 none;
margin-top: -8px;
padding-top: 0;
}
.tab .main_title ul.fx li.on {
border-bottom-width: 0;
border-left-color: transparent;
border-right-color: transparent;
}
.tab .main_title ul.fx {
position: relative;
z-index: 20;
}
.tab .main_title div.animate {
background-color: #FFFFFF;
border-color: #009AD9 #009AD9 #FFFFFF;
border-style: solid;
border-width: 4px 1px 1px;
height: 23px;
position: absolute;
top: 0;
}

tab選項(xiàng)卡 源代碼：
復(fù)制代碼 代碼如下:

/*
* tab 1.0
* Date: 2011-07-09 15:29
* http://zengxiangzhan.cnblogs.com/
*/
var zeng = zeng || {};
zeng.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 .main_title>ul>li[class!='on']>a").click(function() {
return false
})
}
$(".tab .main_title>ul>li,.tab>ul.hotread_menu>li").hover(function() {
a.delayTab(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("<div class='animate' ></div>");
$(b).find(".animate").width($(b).find("ul>li.on").outerWidth() - 2).css("left", $(b).find("ul>li.on").position().left)
})
}
};

作者：曾祥展

相關(guān)文章

  • jQuery獲取同級(jí)元素的簡(jiǎn)單代碼

    jQuery獲取同級(jí)元素的簡(jiǎn)單代碼

    下面小編就為大家?guī)?lái)一篇jQuery獲取同級(jí)元素的簡(jiǎn)單代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-07
  • jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼

    jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼

    這篇文章主要介紹了jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼,涉及jQuery針對(duì)頁(yè)面元素動(dòng)態(tài)操作及響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下
    2016-02-02
  • jquery層次選擇器的介紹

    jquery層次選擇器的介紹

    今天小編就為大家分享一篇關(guān)于jquery層次選擇器的介紹，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
    2019-01-01
  • jQuery中的pushStack實(shí)現(xiàn)原理和應(yīng)用實(shí)例

    jQuery中的pushStack實(shí)現(xiàn)原理和應(yīng)用實(shí)例

    這篇文章主要介紹了jQuery中的pushStack實(shí)現(xiàn)原理和應(yīng)用實(shí)例,pushStack是jQuery內(nèi)核中一個(gè)非常重要的函數(shù),許多jQuery內(nèi)部函數(shù)中都頻繁用到它,掌握這個(gè)函數(shù),有利于理解jQuery的運(yùn)行原理,需要的朋友可以參考下
    2015-02-02
  • jQuery extend 的簡(jiǎn)單實(shí)例

    jQuery extend 的簡(jiǎn)單實(shí)例

    這篇文章介紹了jQuery extend 的簡(jiǎn)單實(shí)例，有需要的朋友可以可以參考一下
    2013-09-09
  • jQuery Easyui快速入門教程

    jQuery Easyui快速入門教程

    jQuery EasyUI是一組基于JQuery的UI插件集合，而JQueryEasyUI的目標(biāo)就是幫助開(kāi)發(fā)者更輕松的打造出功能豐富并且美觀的UI界面，下面小編帶領(lǐng)大家一起學(xué)習(xí)jquery easyui入門知識(shí)，一起看看吧
    2016-08-08
  • jQuery實(shí)現(xiàn)定位滾動(dòng)條位置

    jQuery實(shí)現(xiàn)定位滾動(dòng)條位置

    基于jQuery實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到子元素位置以此來(lái)定位滾動(dòng)條位置，下面是小編給大家?guī)?lái)的實(shí)現(xiàn)代碼，代碼比較簡(jiǎn)單，需要的朋友可以參考下
    2016-08-08
  • Jquery實(shí)現(xiàn)的table最后一行添加樣式的代碼

    Jquery實(shí)現(xiàn)的table最后一行添加樣式的代碼

    有時(shí)間需要將表格的最后一行加上樣式，方便閱讀等需要，需要的朋友可以參考下。
    2010-05-05
  • jQuery實(shí)現(xiàn)回到頂部效果

    jQuery實(shí)現(xiàn)回到頂部效果

    這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)回到頂部效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-10-10
  • 兼容主流瀏覽器的jQuery+CSS 實(shí)現(xiàn)遮罩層的簡(jiǎn)單代碼

    兼容主流瀏覽器的jQuery+CSS 實(shí)現(xiàn)遮罩層的簡(jiǎn)單代碼

    比起使用注冊(cè)頁(yè)和登陸頁(yè)，網(wǎng)站在當(dāng)前頁(yè)使用遮罩層注冊(cè)和登陸的用戶體驗(yàn)要好不少。這里使用jQuery和CSS實(shí)現(xiàn)一個(gè)簡(jiǎn)單的遮罩效果。
    2014-10-10

最新評(píng)論