CSS+Js遮罩效果的TAB及焦点图片切换（推荐）

<！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/g, ""）; this.focusEle = li; this.mask.ready（ul）; this.mask.start（）; }; } </script> </head> <body> <dl><dt>神秘花园</dt> <dd><img src="http://files.jb51.net/demoimg/200911/wall_s1.jpg" border="0" /></dd></dl><dl><dt>脚本之家演示</dt> <dd><img src="http://files.jb51.net/demoimg/200911/wall_s2.jpg" border="0" /></dd></dl><dl><dt>人间仙境</dt> <dd><img src="http://files.jb51.net/demoimg/200911/wall_s3.jpg" border="0" /></dd></dl> <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 v3.5</li> </ul> </li> </ul><script> new ImgFlash（$（"box"））;//初始化 new Tab（$（"tab1"）,"mouseover"）; </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
其实这个不只是效果，代码也是非常值得学习的。大家主要是注意页面最下面的代码
<script>
new ImgFlash（$（"box"））;//初始化
new Tab（$（"tab1"）,"mouseover"）;
</script>