亚洲国产精品无码一区二区久久久,国产免费二卡3卡四卡

　一個封裝了的選項(xiàng)卡效果js

作者：WellFrog 　時間： 2008-03-11　文檔類型：原創(chuàng)　來自：藍(lán)色理想

在論壇里經(jīng)常看到人問選項(xiàng)卡或者類似選項(xiàng)卡的切換效果
這里封裝了個js，希望對大家有用
所有代碼都在下面了：

運(yùn)行代碼框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>井底的蛙</title> <script type="text/javascript"> /* 選項(xiàng)卡封裝 by 井底的蛙 2008-2-4 */ opCard = function() { this.bind = new Array(); this.index = 0; //默認(rèn)顯示哪個選項(xiàng)卡，從0開始 this.style = new Array(); //["","",""] this.overStyle = false; //選項(xiàng)是否有over, out變換樣式事件，樣式為this.style[2] this.overChange = false; //內(nèi)容是否用over, out直接激活 this.menu = false; //菜單類型 this.nesting = [false,false,"",""]; //是否嵌套，后面2個參數(shù)是指定menu,info的子集深度所用id this.auto = [false, 1000]; //自動滾動[true,2000] this.timerID = null; //自動播放的 this.menutimerID = null; //菜單延時的 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)卡嵌套 { // 過濾出需要的數(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如果需要，你可以放一個空的在那占位。")} // 修正 if(this.menu){this.auto=false;this.overChange=true;} //如果是菜單，則沒有自動運(yùn)行，有over, out直接激活 // 循環(huán)添加各個事件等 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")) // 需要跳過的容器 { 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; //記錄自己激活值[序號] 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 // 沒有over, out 改變樣式 { if(this.auto[0]) // 有自動運(yùn)行 { arrMenu[i].onmouseover = function(){autoStop(this, 0);} arrMenu[i].onmouseout = function(){autoStop(this, 1);} } } } if(this.auto[0] || this.menu) //arrinfo 控制自動播放 { 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]) } // 自動播放 function autoMove() { var n; n = my.index + 1; if(n==l){n=0}; while(arrMenu[n].getAttribute("skip")) // 需要跳過的容器 { n += 1; if(n==l){n=0}; } changeOption(arrMenu[n]); my.timerID = setTimeout(autoMove,my.auto[1]); } // onmouseover時，自動播放停止。num：0為over，1為out。 obj暫時無用。 -_-!! 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時，overStyle的onmouseover,onmouseout事件。用來預(yù)激活 obj：目標(biāo)對象。 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])} } /* 菜單類型時用 obj：目標(biāo)對象。 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 = getClass(arrMenu[my.index],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]); //得到第一個子集 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++) //過濾出需要的數(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中，第一個例子 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中，第二個例子 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; //自動播放auto第一個例子 var dd = new opCard(); dd.bind = ["a5","li","b5","div"]; dd.style = ["style1","style2","style3"]; dd.auto = [true, 3000]; dd.creat(); dd = null; //自動播放auto第二個例子 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; //自動播放auto第三個例子 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">簡單介紹</div> <div class="test">默認(rèn)的onclick</div> <div class="test">onmousover觸發(fā)</div> <div class="test">自動播放auto</div> <div class="test">菜單導(dǎo)航</div> <div class="test">關(guān)于嵌套</div> <div class="test">其他應(yīng)用</div> <div class="test">一些說明</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"> 封裝了一個選項(xiàng)卡，不過已經(jīng)不像選項(xiàng)卡了-_-!!!<br><br> 現(xiàn)稍微說明下吧，如果不明白的話，旁邊有幾個例子可能說明起來更清楚些<br><br> <p> <strong>obj.bind = ["a1","td","b1","div"];</strong><br> 綁定id="a1"下的td標(biāo)簽為菜單，綁定id="b1"下的div標(biāo)簽為內(nèi)容，簡單么？<br> td標(biāo)簽的數(shù)量和div標(biāo)簽的數(shù)量必須相同<br> （若不需要顯示內(nèi)容，只顯示菜單話，可以這個在td標(biāo)簽上加<td skip="true">）<br> 如果id="a1"下的td標(biāo)簽有嵌套表格，這樣的話，就不是所有的td都是菜單，這時候需要用下nesting<br><br> <strong>obj.nesting = [false,true,"",""];</strong><br> 當(dāng)標(biāo)簽tag有嵌套時，需要用到這個<br> 比如選項(xiàng)卡內(nèi)容是放在div容器里，而本身這個內(nèi)容里也有div標(biāo)簽，這時就需要用到<br> 菜單嵌套為false，內(nèi)容嵌套為true，且會自動判斷出內(nèi)容標(biāo)簽，多數(shù)時候這樣就可以了<br> 判斷方法為，認(rèn)定getElementsByTagName后第一個標(biāo)簽為內(nèi)容第一項(xiàng)，其他的就用這個第一項(xiàng)的深度來判斷<br> 但有些情況下，這樣還是不行<br> 我用后面2個參數(shù)做id來指定菜單或者內(nèi)容的第一項(xiàng)nesting = [false,true,"","q2"];<br> 這樣就肯定不會錯了（不明白的話看下例子就簡單多了）<br><br> <strong>obj.index = 0;</strong><br> 默認(rèn)顯示第幾個選項(xiàng)卡，序號從0開始<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)容]，對應(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)卡是菜單類型<br><br> <strong>obj.auto = [false, 1000];</strong><br> 選項(xiàng)卡是否自動播放，播放速度（毫秒）<br><br> <strong>obj.creat();</strong><br> 開始生成選項(xiàng)卡，需要onclick觸發(fā)事件的話，可以obj.creat(函數(shù)名)<br> 所有的都會觸發(fā) </p> </div> <div class="s">  <div id="a2"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div id="b2"> <div>這個例子是用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>  <div id="a3"> <ul> <li>1</li> <li>2</li> <li>3</li> <li skip="true">4</li> </ul> </div> <div id="b3"> <div> 這個例子是比上面增加skip="true"<br>即<li skip="true">4</li><br>所以選項(xiàng)卡4是沒有內(nèi)容的<br> 你可以為選項(xiàng)卡的文字直接加上鏈接，我這里就不加了 </div> <div>222222</div> <div>33333</div> <div>4444444</div> </div> </div> <div class="s">  <div id="a4"> <ul> <li>1</li> <li>2</li> <li skip="true">3</li> <li>4</li> </ul> </div> <div id="b4"> <div>這個例子是用onmouseover觸發(fā)的<br>(over，out直接激活)<br>并且<li skip="true">3</li>[選項(xiàng)卡3不會被激活]<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">  <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秒切換一個選項(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秒切換一個選項(xiàng)卡</div> <div>4444444<br>我每3秒切換一個選項(xiàng)卡</div> </div> <div>注：<strong>鼠標(biāo)在選項(xiàng)卡任意位置都會使停止播放</strong><br><br>下面這個結(jié)合overChange一起</div>  <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秒切換一個選項(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秒切換一個選項(xiàng)卡</div> <div>4444444<br>我每2秒切換一個選項(xiàng)卡</div> </div> <div><br>下面這個再來個<li skip="true">3</li>，且overStyle=true;</div>  <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秒切換一個選項(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秒切換一個選項(xiàng)卡</div> <div>4444444<br>我每1秒切換一個選項(xiàng)卡</div> </div> </div>  <div class="s"> <div id="a8"> <ul> <li skip="true">首頁</li> <li>新聞</li> <li>論壇</li> <li skip="true">聯(lián)系我們</li> </ul> </div> <div id="b8"> <div></div> <div><a href="#">國內(nèi)新聞</a><a href="#">國際新聞</a><a href="#">娛樂新聞</a><a href="#">體育新聞</a></div> <div><a href="#">藍(lán)色理想</a><a href="#">blue idea</a></div> <div></div> </div> <div><strong>注：菜單延時一秒關(guān)閉</strong><br>這里只是演示，實(shí)際可以設(shè)置下position什么的。-o-<br>多級菜單不知道能不能支持，沒試過</div> </div> <div class="s"> 我見過的許多選項(xiàng)卡都不能用來嵌套<br>但還是有些時候會用到的<br> 所以如您所見，這個演示本身就是一個嵌套，效果還不錯 </div>  <div class="s"> 比如圖片切換什么，不過我太懶了，不寫了。。。<br> 這個能干什么，我也不知道。。 <div id="a9"> <li>新年好啊</li> <li>快過年了</li> <li>天好冷啊</li> <li>大家去搶紅包吧</li> <li>紅包~！紅包~！你在哪里��？</li> </div> </div> <div class="s"> 選項(xiàng)卡標(biāo)題（或者菜單）必須和選項(xiàng)卡內(nèi)容的數(shù)量相同，否則會出錯<br>即使選項(xiàng)卡菜單skip="true"，內(nèi)容也要放一個空的標(biāo)簽占位<br> 其他好像暫時沒發(fā)現(xiàn)什么<br><br> 本來打算加入ajax的，但有些還沒想好。<br> 效率的話，應(yīng)該還行，我這個演示放了幾個選項(xiàng)卡，似乎還不錯<br><br> 寫這個的目的就是以后弄選項(xiàng)卡只要處理樣式就可以了，很多選項(xiàng)卡或者切換之類都是大同小異<br> 本來是打算弄些特效在里面，考慮會增加不少代碼，所以不加了，簡潔點(diǎn)。<br><br> 哦，還有選項(xiàng)卡是附加樣式，不會取消原本設(shè)置的樣式<br> 如左邊的下劃線是原有的樣式 </div> <div class="s">啥都沒有1</div> <div class="s">啥都沒有2</div> <div class="s">啥都沒有3</div> <div class="s">啥都沒有4</div> </td> </tr> </table> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2829065-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2008/5460.asp　

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。

相關(guān)文章

更多相關(guān)鏈接

JS的IE和FF兼容性問題匯總

使用Style元素更好地封裝觀感

Firewoks制作矢量風(fēng)格漸變效果

實(shí)物光影效果的詳解

Javascript風(fēng)格要素 Ⅱ


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開啟

國際體驗(yàn)設(shè)計(jì)大會7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機(jī)制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx