CSS+JS控制遮罩效果的TAB及焦點圖片切換（薦）_網頁代碼站(www.hbsxmp.com)

歡迎您來到網頁代碼站！設為首頁網頁代碼站分割線

網頁代碼站分割線

加入收藏

網頁代碼站分割線

網頁代碼站分割線

留言板

網頁代碼站分割線

精品美文

網頁代碼站分割線

網頁代碼站分割線

在線手冊

如果您關閉了瀏覽器的javascript，可能導致頁面部分功能無法顯示，請開啟javascript以便正常瀏覽本網頁。網頁代碼站(www.hbsxmp.com)謝謝您的支持！

熱搜:div

您的當前位置：網頁代碼站 >> 圖片特效 >> CSS+JS控制遮罩效果的TAB及焦點圖片切換（薦）

CSS+JS控制遮罩效果的TAB及焦點圖片切換（薦）

分類：圖片特效時間：2009-11-07 點擊：

關鍵詞：JS|css|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>CSS+JS控制遮罩效果的TAB及焦點圖片切換（薦） - www.hbsxmp.com</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><a href="#">神秘花園</a></dt>
	<dd><a href="#"><img src="http://www.hbsxmp.com/images/wall1_s.jpg" border="0" /></a></dd>
	   </dl>
	   <dl>
	    <dt><a href="#">網頁代碼站</a></dt>
	<dd><a href="#"><img src="http://www.hbsxmp.com/images/wall2_s.jpg" border="0" /></a></dd>
	   </dl>
	   <dl>
	    <dt><a href="#">人間仙境</a></dt>
	<dd><a href="#"><img src="http://www.hbsxmp.com/images/wall3_s.jpg" border="0" /></a></dd>
	   </dl>
</div>
<br />
<br /> 
<br />
<br />
<div class="tab" id="tab1">
<ul>
 <li class="d"><a href="javascript:;">WEB前端</a>
   <ul>
     <li><a href="/" target="_blank">VB封裝一個文本文件讀寫類含示例</a></li><li><a href="/" target="_blank">Csdn網站右下角的滑出彈出提示（帶關閉功能）</a></li><li><a href="/" target="_blank">VC++做的精美仿XP開始菜單</a></li><li><a href="/" target="_blank">VB+Access學生綜合檔案管理系統</a></li><li><a href="/" target="_blank">Delphi隨機抽取幸運觀眾Access數據庫版</a></li><li><a href="/" target="_blank">多線程的VC++高速文件搜索代碼</a></li>
   </ul>
  </li>
  <li><a href="javascript:;">源碼下載</a>
	<ul>
	 <li><a href="/" target="_blank">15個jQuery學習實例（菜單、滾動、層隱藏等）</a></li><li><a href="/" target="_blank">VB取漢字拼音首碼（第一個字母）源碼</a></li><li><a href="/" target="_blank">VB 多進制轉換源程序</a></li><li><a href="/" target="_blank">杰奇網站管理系統 JIEQI CMS  v1.7</a></li>
    </ul>
  </li>
  <li><a href="javascript:;">短標題</a>
	<ul>
	<li><a href="/" target="_blank">Delphi版視頻監控系統</a></li><li><a href="/" target="_blank">《Java2核心技術卷2:高級特性》第7版中文高清 PDF</a></li><li><a href="/" target="_blank">基于Delphi的HIS自動更新程序 v2.0</a></li><li><a href="/" target="_blank">C#早期開發的攝像頭監控系統源碼</a></li><li><a href="/" target="_blank">隨機密碼生成器VC++源程序</a></li>
    </ul>
  </li>
  <li><a href="javascript:;">更短</a>
   <ul>
     <li><a href="/" target="_blank">C# 酒店管理（SQL2005）</a></li><li><a href="/" target="_blank">云臺C#家庭視頻監控系統完整版</a></li><li><a href="/" target="_blank">VS2008開發的C#高校宿舍管理系統</a></li><li><a href="/" target="_blank">C#落雪無痕IP端口掃描器VS2005</a></li><li><a href="/" target="_blank">火狐瀏覽器 Firefox v3.5</a></li>
   </ul>
  </li>
</ul>
</div>
<script>
 new ImgFlash($("box"));//初始化
 new Tab($("tab1"),"mouseover");
</script>
</body>
</html>

運行代碼全選代碼復制代碼保存代碼友情提示

網頁代碼站代碼預覽圖片

CSS+Js圖片切換技術，類似的已有不少了，這一個使用了遮罩過渡的效果，同樣應用到了TAB選項卡上，本頁面僅是為了演示，大家用時候把它拆分開來，這個效果也對學習圖片效果制作很有幫助。

一、如果您使用的瀏覽器版本為IE6.0、360瀏覽器V3.0.8.1版本或者IE的更低版本瀏覽本頁面，建議您升級瀏覽器至IE7以上，上面的“運行”按鈕可能不能用，但您可按以下方式查看。
運行代碼方式：
1、點擊“復制”按鈕；
2、在桌面建立一個txt文檔；
3、粘貼復制的代碼；
4、最后把txt的擴展名改為“htm”或“html”；
5、完成，打開即可看到效果。

二、如果您使用FireFox或者非IE瀏覽器，建議您使用IE7以上版本。上面的“復制”按鈕失效，請您“全選”，以普通方式復制！

三、某些代碼因需加載完Jquery等之類比較大的JS文件，如果您看不到效果，請您刷新頁面！

四、某些代碼不能完全兼容各瀏覽器，還請您再次修改才能使用！給您帶來的不便！盡請諒解！謝謝您的支持！

上一篇：JS產生放大效果的鏈接
下一篇：CSS打造一款韓國風格的導航代碼

問問 | 貼吧 | 查詢 | 給我留言 | 精品美文 | 友情鏈接 | | 本站承接網站開發業務
版權聲明 | 廣告服務 | 聯系我們 | 網站地圖 | 關于我們 | | 滇ICP備08101440號
Powered by 網頁代碼站(網頁即"web" + 代碼即"dm" + "cn" = webdm.cn) | 最專業的代碼下載網站 - 致力為中國站長提供高質量的代碼！

滇公網安備 53032202100002號

精品久久久久久久中文字幕