<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>js Mask effect tab and picture toggle </title> <style> Div, UL, OL, Li, DL, DT, DD {margin:0; padding:0; }. Imgflash,.tab{margin:auto}/*------focus Picture's 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 {//* activated small square style * * Background-color: #CC0000; Filter:alpha (opacity=80); opacity:0.8; }/*-------------------------tab's 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);}};/ /bind var Tween = function (t,b,c,d) {return c*t/d + b;};/ /Buffered Functions 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] = FnHa Ndler; };//Event Listener Function removeEventHandler (Otarget, Seventtype, Fnhandler) {if (Otarget.removeeventlistener) {oTarget.re Moveeventlistener (Seventtype, Fnhandler, false); else if (otargeT.detachevent) {otarget.detachevent ("on" + Seventtype, Fnhandler); else {otarget["on" + seventtype] = null; };//Remove monitor 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 Mask animation var Mask = function () {THIS.FL = Timer.add (Bind (This,this.fn)); This.from_num = 0; This.speed = 50;//animation speed, the larger the slower}; 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 ";//Avoid simultaneous" "" 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) {//Set matte rectangle for positioning The mask's transform direction 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 ()//If you do not need to repeat the animation, the comment, the above sentence does not comment}}; function Imgflash (box) {This.box = Box.getelementsbytagname ("DL"); this.ge = 4;//switching interval number of seconds this.menu = []; This.mask = new Mask ()//load mask animation, do not set parameters that is, random effect 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 ()//init mask animation 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> </pead> <body> <div class= "Imgflash" id= "box" > <dl> <dt> Mystery Garden </dt> <dd></dd> </dl> <dl> <dt> Cloud-Habitat Community demo </dt> <dd& Gt;</dd> </dl> <dl> <dt> human fairyland </dt> <dd></dd> </dl > </div> <div class= "tab" id= "Tab1" > <ul> <li class= "D" >web front-end <ul> < Li>vb encapsulates a text file read-write class with examples </li><li>csdn the bottom right corner of the slide out pop-up tip (with off function) </li><li>vc++ do the exquisite imitation XP Start menu </li ><li>vb+access Student Comprehensive file management system </li><li>delphi random sampling of Lucky Viewers Access database version </li><li> multi-thread VC + + High-speed File search code </li> </ul> </li> <li> source Download <ul> <li>15 A jquery Learning example (menu, scrolling, layer hide, etc.) </li><li& Gt VB to take Chinese pinyin first code (first letter) source code </LI><LI>VB conversion source program </li><li> Jackie Website Management system Jieqi CMS v1.7</li> </ul > </li> <li> short title <ul> <li>delphi version Video Surveillance system </li><li> "JAVA2 Core Technology Volume 2: Advanced Features" 7th edition Chinese High Qing pdf</li><li> based on Delphi Automatic Update program v2.0</li><li>c# Early development of the camera monitoring system source code </li><li> Random Password Generator VC + + source program </li> </ul> </li> <li> shorter <ul> <li>c# Hotel Management (SQL2005) </li><l I> PTZ C # Home Video surveillance System full version </li><li>vs2008 development of C # University dormitory management system </li><li>c# Snow no trace IP Port scanner vs2005</li ><li> Firefox browser firefox v3.5</li> </ul> </li> </ul> </div> <script> New IMGF Lash ($ ("box"));//Initialize New Tab ($ ("Tab1"), "mouseover"); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In fact, this is not only the effect of the code is also very worthwhile to learn. The main attention is to the bottom of the page code
<script>
New Imgflash ($ ("box"));//initialization
New Tab ($ ("Tab1"), "mouseover");
</script>
