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   id="70qarhlowxag"   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   id="70qarhlowxag"   class="tab" id="tab1"><ul> <li id="70qarhlowxag"    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網站導航菜單