<!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=gb2312" /> <title>Js遮罩效果的TAB及圖片切換</title> <style> div, ul, ol, li, dl, dt, dd { margin:0; padding:0; } .imgFlash,.tab{margin:auto} /*------焦點圖片的css-------*/ .imgFlash { height:230px;width:270px; position:relative; } .imgFlash dl { height:100%; overflow:hidden; position:absolute; width:100%; } .imgFlash img { height:100%; position:absolute; width:100%; background-color: #FFFFFF; background-repeat: no-repeat; background-position: center center; } .imgFlash dt { bottom:0; font-size:12px; height:24px;line-height:24px; left:0; position:absolute; width:100%; z-index:1; } .imgFlash dt span { background-color:#000000; height:100%; opacity:0.4;filter:Alpha(Opacity=40); position:absolute; width:100%; } .imgFlash dt a { color:#FFFFFF; position:absolute; text-decoration:none; text-indent:5px; z-index:1; } .imgFlash dt a:hover { text-decoration:underline; } .imgFlash div { bottom:8px; cursor:pointer; display:block; position:absolute; right:8px; z-index:99999; } .imgFlash div em { background-color:#000000; border:1px solid #FFFFFF; display:block; float:right; height:4px; margin-right:3px; filter:Alpha(Opacity=50);opacity:0.5; overflow:hidden; width:4px; } .imgFlash div em.d {/*啟用的小方塊的樣式*/ background-color:#CC0000; filter:Alpha(Opacity=80); opacity:0.8; } /*-------------------------Tab的css----------------------------*/ .tab,.tab ul{list-style-type: none;} .tab{ width:270px; background-color:#FFFFFF; height: 160px; font-size: 12px; position: relative; border-top-width: 30px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #0066FF; border-right-color: #0066FF; border-bottom-color: #0066FF; border-left-color: #0066FF; } .tab ul { position: absolute; top: -30px; } .tab li{ float:left; background-color:#A9CEEB; background-repeat:no-repeat; background-position:left top; margin-top:5px; margin-left: 5px; } .tab li.d { background-color: #FFFFFF; } .tab li a{text-decoration:none;display:block;padding-right:8px;padding-left:8px;line-height:25px;color:#2B6FA2;} .tab li.d a{color:#0C3E74;} .tab li ul{ border-bottom-style:none; position:absolute; left:0px; top:30px; background-color: #FFFFFF; padding-top: 10px; width: 270px; } .tab li li{ float:none; background-image:none; margin:0px; background-color: #FFFFFF; } .tab li li a{ background-image:none; line-height:22px; color: #000000; float: none; height: 22px; } .tab li ul li a:hover{text-decoration:underline;} .tab li.d li a{color:#000000;} </style> <script language="javascript"> var $ = function (d){return document.getElementById( d );}; var isIE = (document.all) ? true : false; var Bind = function (obj,fun,arr){return function() {arr || (arr = arguments);return fun.apply(obj,arr);}};//綁定 var Tween = function(t,b,c,d){return c*t/d + b;};//緩衝函數 function addEventHandler(oTarget, sEventType, fnHandler) {if (oTarget.addEventListener) {oTarget.addEventListener(sEventType, fnHandler, false);} else if (oTarget.attachEvent) {oTarget.attachEvent("on" + sEventType, fnHandler);} else {oTarget["on" + sEventType] = fnHandler; } };//事件監聽 function removeEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; } };//移除監聽 var Timer = {};//Timer Timer.add = function (fn){return new this.fn(fn)}; Timer.fn = function (fn){ var timer; this.play = function (speed,only){ speed || ( speed = 10 ); if(only)timer = window.setTimeout(fn,speed); else timer = window.setInterval(fn,speed); }; this.stop = function (){clearTimeout(timer);clearInterval(timer)}; }; //Mask 遮罩動畫 var Mask = function (){ this.fl = Timer.add(Bind(this,this.fn)); this.from_num = 0; this.speed = 50;//動畫速度，越大越慢 }; Mask.prototype.ready = function (ele,pos){ if(this.ele)this.set(this.maxWidth,this.maxHeight); this.ele = ele; this.maxWidth = this.ele.offsetWidth; this.maxHeight = this.ele.offsetHeight; this.ele.style.position = "absolute"; this.from_num = 0; if(!pos){ var x = ["left","center","right",""][parseInt(4*Math.random())], y = ["top","center","bottom",""][parseInt(4*Math.random())]; if(x == "" && y == "")x = "left";//避免同時為"" this.position = [x,y]; }else{ this.position = pos; } this.set(0,0); this.fl.stop(); }; Mask.prototype.start = function (){this.fl.play();}; Mask.prototype.stop = function (){this.fl.stop();}; Mask.prototype.set = function (width,height){//設定遮罩的矩形，用於定位遮罩的變換方向 var t,r,b,l; switch(this.position[0]){ case "left" : l = 0; r = width; break; case "center" : l = (this.maxWidth - width)/2; r = (this.maxWidth + width)/2; break; case "right" : l = this.maxWidth - width; r = this.maxWidth; break; default: l = 0; r = this.maxWidth; } switch(this.position[1]){ case "top" : t = 0; b = height; break; case "center" : t = (this.maxHeight - height)/2; b = (this.maxHeight + height)/2; break; case "bottom" : t = this.maxHeight - height; b = this.maxHeight; break; default : t = 0; b = this.maxHeight; break; } this.ele.style.clip = "rect(" + t + "px," + r + "px," + b + "px," + l + "px)" ; }; Mask.prototype.fn = function (){ var w,h; this.from_num ++ ; if(this.from_num<=this.speed){ w = Tween(this.from_num,0,this.maxWidth,this.speed); h = Tween(this.from_num,0,this.maxHeight,this.speed); this.set(w,h); }else{ this.fl.stop(); //this.start();//若不需要重複動畫，把這句注釋，上句不注釋 } }; function ImgFlash(box){ this.box = box.getElementsByTagName("dl"); this.ge = 4;//切換間隔秒數 this.menu = []; this.mask = new Mask();//載入遮罩動畫，不設定參數 即 隨機效果 this.zIndex = this.box.length; var _div = document.createElement('div'); this.dang = 0; for(i=0;i<this.zIndex;i++){ this.box[i].style.zIndex = this.zIndex-i; var _em = document.createElement('em'),_span = document.createElement('span'); var _dt = this.box[i].getElementsByTagName("dt")[0]; _dt.appendChild(_span); addEventHandler(_em,'mouseover',Bind(this,this.emEvent,[this.zIndex-i-1,true])); _div.appendChild(_em); this.menu.push(_em); if(this.zIndex-i==1){ _em.className = 'd'; } } box.appendChild(_div); addEventHandler(box,'mouseover',Bind(this,function(){this.fl.stop()})); addEventHandler(box,'mouseout',Bind(this,function(){this.fl.play(this.ge*1000)})); this.fl = Timer.add(Bind(this,this.enterFrame)) this.fl.play(this.ge*1000); } ImgFlash.prototype.enterFrame = function(){ var ddd = this.dang==2?0:this.dang+1; this.emEvent(ddd); }; ImgFlash.prototype.emEvent = function (index,b){ if(b)this.fl.stop(); if(index == this.dang)return; this.menu[this.menu.length-1-this.dang].className=""; var odl = this.box[this.dang]; this.zIndex++; this.dang = index; this.menu[this.menu.length-1-this.dang].className="d"; var ndl = this.box[this.dang]; var img = ndl.getElementsByTagName("img")[0]; this.mask.ready(img); this.mask.start(); ndl.style.zIndex = this.zIndex; } function Tab(id,type){ var nav = id.getElementsByTagName("ul")[0].childNodes; var _nav,i=0; this.mask = new Mask();//初始化遮罩動畫 this.z = 1000; while(_nav = nav[i++]){ if(_nav.className=="d")this.focusEle = _nav; if(_nav.childNodes.length>1){ var A = _nav.getElementsByTagName("A")[0]; addEventHandler(A,type,Bind(this,fun,[A])); } if(_nav.nodeType == 1)_nav.getElementsByTagName("UL")[0].style.zIndex = nav.length-i; } function fun(ele){ var li = ele.parentNode; var ul = li.getElementsByTagName("UL")[0]; this.z += 1 ul.style.zIndex = this.z; if(li.className=="d")return; li.className+=(li.className.length>0? " ": "") + "d"; this.focusEle.className=this.focusEle.className.replace(/( ?|^)d\b/g, ""); this.focusEle = li; this.mask.ready(ul); this.mask.start(); }; } </script> </head> <body> <div class="imgFlash" id="box"> <dl> <dt>神秘花園</dt> <dd></dd> </dl> <dl> <dt>雲棲社區示範</dt> <dd></dd> </dl> <dl> <dt>人間仙境</dt> <dd></dd> </dl> </div> <div class="tab" id="tab1"> <ul> <li class="d">WEB前端 <ul> <li>VB封裝一個文字檔讀寫類含樣本</li><li>Csdn網站右下角的滑出彈出提示（帶關閉功能）</li><li>VC++做的精美仿XP開始菜單</li><li>VB+Access學生綜合檔案管理系統</li><li>Delphi隨機抽取幸運觀眾Access資料庫版</li><li>多線程的VC++高速檔案搜尋代碼</li> </ul> </li> <li>源碼下載 <ul> <li>15個jQuery學習執行個體（菜單、滾動、層隱藏等）</li><li>VB取漢字拼音首碼（第一個字母）源碼</li><li>VB 多進位轉換來源程式</li><li>傑奇網站管理系統 JIEQI CMS v1.7</li> </ul> </li> <li>短標題 <ul> <li>Delphi版視頻監控系統</li><li>《Java2核心技術卷2:進階特性》第7版中文高清 PDF</li><li>基於Delphi的HIS自動更新程式 v2.0</li><li>C#早期開發的網路攝影機監控系統源碼</li><li>隨機密碼產生器VC++來源程式</li> </ul> </li> <li>更短 <ul> <li>C# 酒店管理（SQL2005）</li><li>雲台C#家庭視頻監控系統完整版</li><li>VS2008開發的C#高校宿舍管理系統</li><li>C#落雪無痕IP連接埠掃描器VS2005</li><li>Firefox瀏覽器 Firefox v3.5</li> </ul> </li> </ul> </div> <script> new ImgFlash($("box"));//初始化 new Tab($("tab1"),"mouseover"); </script> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
其實這個不只是效果，代碼也是非常值得學習的。大家主要是注意頁面最下面的代碼
<script>
new ImgFlash($("box"));//初始化
new Tab($("tab1"),"mouseover");
</script>
