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

2024-09-05 12:20:29

字体：大中小

来源：转载

供稿：网友

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 = {};//TimerTimer.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><img src="/d/file/p/2024/09-05/796c8fe6e3d60a878eb7f1a5e0daa843.jpg" border="0" /></dd>	   </dl>	   <dl>	    <dt>源码爱好者</dt>	<dd><img src="/d/file/p/2024/09-05/1626725421850f258dc6a8c27d88fbed.jpg" border="0" /></dd>	   </dl>	   <dl>	    <dt>人间仙境</dt>	<dd><img src="/d/file/p/2024/09-05/81ecfa3f3fc4bb8a2567ae0d5c0009e5.jpg" border="0" /></dd>	   </dl></div><br /><br /> <br /><br /><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 v3.5</li>   </ul>  </li></ul></div><script> new ImgFlash($("box"));//初始化 new Tab($("tab1"),"mouseover");</script></body></html>

上一篇：灰色会换色MAC官方菜单纯CSS实现

下一篇：UL、LI 无序列表实现纯CSS网站导航菜单