|
|
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>腳本之家 選項(xiàng)卡效果 www.jb51.NET</title>
<script type="text/Javascript">
/*
選項(xiàng)卡封裝
by 井底的蛙
2008-2-4
*/
opCard = function()
{
this.bind = new Array();
this.index = 0; //默認(rèn)顯示哪個(gè)選項(xiàng)卡，從0開(kāi)始
this.style = new Array(); //["","",""]
this.overStyle = false; //選項(xiàng)是否有over, out變換樣式事件，樣式為this.style[2]
this.overChange = false; //內(nèi)容是否用over, out直接激活
this.menu = false; //菜單類(lèi)型
this.nesting = [false,false,"",""]; //是否嵌套，后面2個(gè)參數(shù)是指定menu,info的子集深度所用id
this.auto = [false, 1000]; //自動(dòng)滾動(dòng)[true,2000]
this.timerID = null; //自動(dòng)播放的
this.menutimerID = null; //菜單延時(shí)的
this.creat = function(func)
{
var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);
var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);
var my = this, i;
var argLen = arguments.length;
var arrM = new Array();
if(this.nesting[0] || this.nesting[1]) // 有選項(xiàng)卡嵌套
{ // 過(guò)濾出需要的數(shù)據(jù)
var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;
var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;
}
else
{
var arrMenu = _arrMenu;
var arrInfo = _arrInfo;
}
var l = arrMenu.length;
if(l!=arrInfo.length){alert("菜單和內(nèi)容必須擁有相同的數(shù)量/n如果需要，你可以放一個(gè)空的在那占位。")}
// 修正
if(this.menu){this.auto=false;this.overChange=true;} //如果是菜單，則沒(méi)有自動(dòng)運(yùn)行，有over, out直接激活
// 循環(huán)添加各個(gè)事件等
for(i=0;i<l;i++)
{
arrMenu[i].cName = arrMenu[i].className;
arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]); //加載樣式，菜單的話統(tǒng)一樣式
if(arrMenu[i].getAttribute("skip")) // 需要跳過(guò)的容器
{
if(this.overStyle || this.overChange) // 有over, out 改變樣式 或者 激活
{
arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
}
arrMenu[i].onclick = function(){if(argLen==1){func()}}
arrInfo[i].style.display = "none";
continue;
}
if(i!=this.index || this.menu){arrInfo[i].style.display="none"}; //隱藏初始化，菜單的話全部隱藏
arrMenu[i].index = i; //記錄自己激活值[序號(hào)]
arrInfo[i].index = i;
if(this.overChange) //有鼠標(biāo)over, out事件
{
arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);}
arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);}
}
else //onclick觸發(fā)
{
arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}}
if(this.overStyle) // 有over, out 改變樣式
{
arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
}
else // 沒(méi)有over, out 改變樣式
{
if(this.auto[0]) // 有自動(dòng)運(yùn)行
{
arrMenu[i].onmouseover = function(){autoStop(this, 0);}
arrMenu[i].onmouseout = function(){autoStop(this, 1);}
}
}
}
if(this.auto[0] || this.menu) //arrinfo 控制自動(dòng)播放
{
arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);}
arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);}
}
} //for結(jié)束
if(this.auto[0])
{
this.timerID = setTimeout(autoMove,this.auto[1])
}
// 自動(dòng)播放
function autoMove()
{
var n;
n = my.index + 1;
if(n==l){n=0};
while(arrMenu[n].getAttribute("skip")) // 需要跳過(guò)的容器
{
n += 1;
if(n==l){n=0};
}
changeOption(arrMenu[n]);
my.timerID = setTimeout(autoMove,my.auto[1]);
}
// onmouseover時(shí)，自動(dòng)播放停止。num：0為over，1為out。 obj暫時(shí)無(wú)用。 -_-!!
function autoStop(obj, num)
{
if(!my.auto[0]){return;}
//if(obj.index==my.index)
num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]);
}
// 改變選項(xiàng)卡
function changeOption(obj)
{
arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); //修改舊內(nèi)容
arrInfo[my.index].style.display = "none"; //隱藏舊內(nèi)容
obj.className = getClass(obj,my.style[1]); //修改為新樣式
arrInfo[obj.index].style.display = ""; //顯示新內(nèi)容
my.index = obj.index; //更新當(dāng)前選擇的index
}
/*
只有onclick時(shí)，overStyle的onmouseover,onmouseout事件。用來(lái)預(yù)激活
obj：目標(biāo)對(duì)象。 num：1為over，0為out
*/
function changeTitle(obj, num)
{
if(!my.overStyle){return;};
if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])}
}
/*
菜單類(lèi)型時(shí)用
obj：目標(biāo)對(duì)象。 num：1為over，0為out
*/
function changeMenu(num)
{
if(!my.menu){return;}
num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID)
}
//關(guān)閉菜單
function menuClose()
{
arrInfo[my.index].style.display = "none";
arrMenu[my.index].className = my.style[0];
}
// 得到className（防止將原有樣式覆蓋）
function getClass(o, s)
{
if(o.cName==""){return s}
else{return o.cName + " " + s}
}
//嵌套情況下得到真正的子集
function getChilds(arrObj, id, num)
{
var depth = 0;
var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]); //得到第一個(gè)子集
do //計(jì)算深度
{
if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1}
firstObj = firstObj.parentNode;
}
while(firstObj.tagName.toLowerCase()!="body") // body強(qiáng)制退出。
var t;
var arr = new Array();
for(i=0;i<arrObj.length;i++) //過(guò)濾出需要的數(shù)據(jù)
{
t = arrObj[i], d = 0;
do
{
if(t.parentNode.getAttribute("id")==id && d == depth)
{
arr.push(arrObj[i]);break; //得到數(shù)據(jù)
}
else
{
if(d==depth){break};d+=1;
}
t = t.parentNode;
}
while(t.tagName.toLowerCase()!="body") // body強(qiáng)制退出
}
return arr;
}
}
}
window.onload = function()
{
var aa = new opCard();
aa.bind = ["a1","div","b1","div"];
aa.style = ["a1_0","a1_1","a1_0"];
aa.index = 0;
aa.nesting = [false,true,"",""]
aa.creat();
aa =null;
// 默認(rèn)的onclick中，第一個(gè)例子
var bba = new opCard();
bba.bind = ["a2","li","b2","div"];
bba.style = ["style1","style2","style3"];
bba.overStyle = true;
bba.creat();
bba = null;
// 默認(rèn)的onclick中，第二個(gè)例子
var bbb = new opCard();
bbb.bind = ["a3","li","b3","div"];
bbb.style = ["style1","style2","style3"];
bbb.overStyle = true;
bbb.creat();
bbb = null;
// onmousover觸發(fā)中的例子
var cc = new opCard();
cc.bind = ["a4","li","b4","div"];
cc.style = ["style1","style2","style3"];
cc.overStyle = true;
cc.overChange = true;
cc.creat();
cc = null;
//自動(dòng)播放auto第一個(gè)例子
var dd = new opCard();
dd.bind = ["a5","li","b5","div"];
dd.style = ["style1","style2","style3"];
dd.auto = [true, 3000];
dd.creat();
dd = null;
//自動(dòng)播放auto第二個(gè)例子
var ee = new opCard();
ee.bind = ["a6","li","b6","div"];
ee.style = ["style1","style2","style3"];
ee.auto = [true, 2000];
ee.overChange = true;
ee.creat();
ee = null;
//自動(dòng)播放auto第三個(gè)例子
var ff = new opCard();
ff.bind = ["a7","li","b7","div"];
ff.style = ["style1","style2","style3"];
ff.auto = [true, 1000];
ff.overChange = true;
ff.overStyle = true;
ff.creat();
ff = null;
//菜單導(dǎo)航例子
var gg = new opCard();
gg.bind = ["a8","li","b8","div"];
gg.style = ["style1","style2","style3"];
gg.overStyle = true;
gg.menu = true;
gg.creat();
gg = null;
//其他應(yīng)用
var hh = new opCard();
hh.bind = ["a9","li","a9","li"];
hh.style = ["style4","style4","style4"];
//hh.overStyle = true;
hh.auto = [true, 1000];
hh.creat();
hh = null;
}
</script>
<style type="text/css">
body{font-size:12px; font-family:Verdana,"宋體";}
p,ul{margin:0px; padding:0px;}
td,div{font-size:12px}
.a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;}
.a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;}
.test{text-decoration:underline;}
#b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}
#b1 div.s strong{color:#0066FF;}
/* */
.style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
#a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;}
#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}
#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}
#b8 div a{margin-right:20px;}
.style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="a1" width="140" valign="top" align="center">
<div class="test">簡(jiǎn)單介紹</div>
<div class="test">默認(rèn)的onclick</div>
<div class="test">onmousover觸發(fā)</div>
<div class="test">自動(dòng)播放auto</div>
<div class="test">菜單導(dǎo)航</div>
<div class="test">關(guān)于嵌套</div>
<div class="test">其他應(yīng)用</div>
<div class="test">一些說(shuō)明</div>
<div class="test"> </div>
<div class="test"> </div>
<div class="test"> </div>
<div class="test"> </div>
</td>
<td id="b1" valign="top">
<div class="s">
封裝了一個(gè)選項(xiàng)卡，不過(guò)已經(jīng)不像選項(xiàng)卡了-_-!!!<br><br>
現(xiàn)稍微說(shuō)明下吧，如果不明白的話，旁邊有幾個(gè)例子可能說(shuō)明起來(lái)更清楚些<br><br>
<p>
<strong>obj.bind = ["a1","td","b1","div"];</strong><br>
綁定id="a1"下的td標(biāo)簽為菜單，綁定id="b1"下的div標(biāo)簽為內(nèi)容，簡(jiǎn)單么？<br>
td標(biāo)簽的數(shù)量和div標(biāo)簽的數(shù)量必須相同<br>
（若不需要顯示內(nèi)容，只顯示菜單話，可以這個(gè)在td標(biāo)簽上加<td skip="true">）<br>
如果id="a1"下的td標(biāo)簽有嵌套表格，這樣的話，就不是所有的td都是菜單，這時(shí)候需要用下nesting<br><br>
<strong>obj.nesting = [false,true,"",""];</strong><br>
當(dāng)標(biāo)簽tag有嵌套時(shí)，需要用到這個(gè)<br>
比如選項(xiàng)卡內(nèi)容是放在div容器里，而本身這個(gè)內(nèi)容里也有div標(biāo)簽，這時(shí)就需要用到<br>
菜單嵌套為false，內(nèi)容嵌套為true，且會(huì)自動(dòng)判斷出內(nèi)容標(biāo)簽，多數(shù)時(shí)候這樣就可以了<br>
判斷方法為，認(rèn)定getElementsByTagName后第一個(gè)標(biāo)簽為內(nèi)容第一項(xiàng)，其他的就用這個(gè)第一項(xiàng)的深度來(lái)判斷<br>
但有些情況下，這樣還是不行<br>
我用后面2個(gè)參數(shù)做id來(lái)指定菜單或者內(nèi)容的第一項(xiàng)nesting = [false,true,"","q2"];<br>
這樣就肯定不會(huì)錯(cuò)了（不明白的話看下例子就簡(jiǎn)單多了）<br><br>
<strong>obj.index = 0;</strong><br>
默認(rèn)顯示第幾個(gè)選項(xiàng)卡，序號(hào)從0開(kāi)始<br><br>
<strong>obj.style = ["c1","c2","c3"]</strong><br>
菜單加載的樣式的className：<br>
菜單未選中的className是c1<br>
菜單選中的className是c2<br>
菜單onmouseover的className是c3<br><br>
<strong>obj.overStyle = false;</strong><br>
選項(xiàng)卡是否有onmouseover, onmouseout變換樣式事件[非激活選項(xiàng)卡內(nèi)容]，對(duì)應(yīng)的樣式為style[2]<br><br>
<strong>obj.overChange = false;</strong><br>
選項(xiàng)卡內(nèi)容是否用onmouseover, onmouseout直接激活<br><br>
<strong>obj.menu = false;</strong><br>
選項(xiàng)卡是菜單類(lèi)型<br><br>
<strong>obj.auto = [false, 1000];</strong><br>
選項(xiàng)卡是否自動(dòng)播放，播放速度（毫秒）<br><br>
<strong>obj.creat();</strong><br>
開(kāi)始生成選項(xiàng)卡，需要onclick觸發(fā)事件的話，可以obj.creat(函數(shù)名)<br>
所有的都會(huì)觸發(fā)
</p>
</div>
<div class="s">
<!--默認(rèn)的onclick中，第一個(gè)例子-->
<div id="a2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="b2">
<div>這個(gè)例子是用onclick觸發(fā)的<br>并設(shè)置overStyle = true;<br>(over，out改變樣式,但不激活)</div>
<div>
var bba = new opCard();<br>
bba.bind = ["a2","li","b2","div"];<br>
bba.style = ["style1","style2","style1"];<br>
bba.overStyle = true;<br>
bba.creat();<br>
bba = null;
</div>
<div>33333</div>
<div>4444444</div>
</div><br>
<!--默認(rèn)的onclick中，第二個(gè)例子-->
<div id="a3">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li skip="true">4</li>
</ul>
</div>
<div id="b3">
<div>
這個(gè)例子是比上面增加skip="true"<br>即<li skip="true">4</li><br>所以選項(xiàng)卡4是沒(méi)有內(nèi)容的<br>
你可以為選項(xiàng)卡的文字直接加上鏈接，我這里就不加了
</div>
<div>222222</div>
<div>33333</div>
<div>4444444</div>
</div>
</div>
<div class="s">
<!--onmousover觸發(fā)中的例子-->
<div id="a4">
<ul>
<li>1</li>
<li>2</li>
<li skip="true">3</li>
<li>4</li>
</ul>
</div>
<div id="b4">
<div>這個(gè)例子是用onmouseover觸發(fā)的<br>(over，out直接激活)<br>并且<li skip="true">3</li>[選項(xiàng)卡3不會(huì)被激活]<br>overStyle = true;</div>
<div>
var cc = new opCard();<br>
cc.bind = ["a4","li","b4","div"];<br>
cc.style = ["style1","style2","style1"];<br>
cc.overStyle = true;<br>
cc.overChange = true;<br>
cc.creat();<br>
cc = null;
</div>
<div>33333</div>
<div>4444444</div>
</div>
</div>
<div class="s">
<!--自動(dòng)播放auto第一個(gè)例子-->
<div id="a5">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="b5">
<div>1111111<br>我每3秒切換一個(gè)選項(xiàng)卡</div>
<div>
var ee = new opCard();<br>
ee.bind = ["a6","li","b6","div"];<br>
ee.style = ["style1","style2","style1"];<br>
ee.auto = [true, 2000];<br>
ee.overChange = true;<br>
ee.creat();<br>
ee = null;
</div>
<div>33333<br>我每3秒切換一個(gè)選項(xiàng)卡</div>
<div>4444444<br>我每3秒切換一個(gè)選項(xiàng)卡</div>
</div>
<div>注：<strong>鼠標(biāo)在選項(xiàng)卡任意位置都會(huì)使停止播放</strong><br><br>下面這個(gè)結(jié)合overChange一起</div>
<!--自動(dòng)播放auto第二個(gè)例子-->
<div id="a6">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="b6">
<div>1111111<br>我每2秒切換一個(gè)選項(xiàng)卡</div>
<div>
var dd = new opCard();<br>
dd.bind = ["a5","li","b5","div"];<br>
dd.style = ["style1","style2","style1"];<br>
dd.auto = [true, 3000];<br>
dd.creat();<br>
dd = null;<br>
</div>
<div>33333<br>我每2秒切換一個(gè)選項(xiàng)卡</div>
<div>4444444<br>我每2秒切換一個(gè)選項(xiàng)卡</div>
</div>
<div><br>下面這個(gè)再來(lái)個(gè)<li skip="true">3</li>，且overStyle=true;</div>
<!--自動(dòng)播放auto第三個(gè)例子-->
<div id="a7">
<ul>
<li>1</li>
<li>2</li>
<li skip="true">3</li>
<li>4</li>
</ul>
</div>
<div id="b7">
<div>1111111<br>我每1秒切換一個(gè)選項(xiàng)卡</div>
<div>
var ff = new opCard();<br>
ff.bind = ["a7","li","b7","div"];<br>
ff.style = ["style1","style2","style1"];<br>
ff.auto = [true, 1000];<br>
ff.overChange = true;<br>
ff.overStyle = true;<br>
ff.creat();<br>
ff = null;
</div>
<div>33333<br>我每1秒切換一個(gè)選項(xiàng)卡</div>
<div>4444444<br>我每1秒切換一個(gè)選項(xiàng)卡</div>
</div>
</div>
<!--菜單導(dǎo)航的例子-->
<div class="s">
<div id="a8">
<ul>
<li skip="true">首頁(yè)</li>
<li>新聞</li>
<li>論壇</li>
<li skip="true">聯(lián)系我們</li>
</ul>
</div>
<div id="b8">
<div></div>
<div><a href="#">國(guó)內(nèi)新聞</a><a href="#">國(guó)際新聞</a><a href="#">娛樂(lè)新聞</a><a href="#">體育新聞</a></div>
<div><a href="#">藍(lán)色理想</a><a href="#">blue idea</a></div>
<div></div>
</div>
<div><strong>注：菜單延時(shí)一秒關(guān)閉</strong><br>這里只是演示，實(shí)際可以設(shè)置下position什么的。-o-<br>多級(jí)菜單不知道能不能支持，沒(méi)試過(guò)</div>
</div>
<div class="s">
我見(jiàn)過(guò)的許多選項(xiàng)卡都不能用來(lái)嵌套<br>但還是有些時(shí)候會(huì)用到的<br>
所以如您所見(jiàn)，這個(gè)演示本身就是一個(gè)嵌套，效果還不錯(cuò)
</div>
<!--其他應(yīng)用-->
<div class="s">
比如圖片切換什么，不過(guò)我太懶了，不寫(xiě)了。。。<br>
這個(gè)能干什么，我也不知道。。
<div id="a9">
<li>新年好啊</li>
<li>快過(guò)年了</li>
<li>天好冷啊</li>
<li>大家去搶紅包吧</li>
<li>紅包~！紅包~！你在哪里??？</li>
</div>
</div>
<div class="s">
選項(xiàng)卡標(biāo)題（或者菜單）必須和選項(xiàng)卡內(nèi)容的數(shù)量相同，否則會(huì)出錯(cuò)<br>即使選項(xiàng)卡菜單skip="true"，內(nèi)容也要放一個(gè)空的標(biāo)簽占位<br>
其他好像暫時(shí)沒(méi)發(fā)現(xiàn)什么<br><br>
本來(lái)打算加入ajax的，但有些還沒(méi)想好。<br>
效率的話，應(yīng)該還行，我這個(gè)演示放了幾個(gè)選項(xiàng)卡，似乎還不錯(cuò)<br><br>
寫(xiě)這個(gè)的目的就是以后弄選項(xiàng)卡只要處理樣式就可以了，很多選項(xiàng)卡或者切換之類(lèi)都是大同小異<br>
本來(lái)是打算弄些特效在里面，考慮會(huì)增加不少代碼，所以不加了，簡(jiǎn)潔點(diǎn)。<br><br>
哦，還有選項(xiàng)卡是附加樣式，不會(huì)取消原本設(shè)置的樣式<br>
如左邊的下劃線是原有的樣式
</div>
<div class="s">啥都沒(méi)有1</div>
<div class="s">啥都沒(méi)有2</div>
<div class="s">啥都沒(méi)有3</div>
<div class="s">啥都沒(méi)有4</div>
</td>
</tr>
</table>
</body>
</html>
JavaScript技術(shù)：一個(gè)js封裝的不錯(cuò)的選項(xiàng)卡效果代碼，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
