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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!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\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="//ku.shouce.ren/files/images/201601/56a08349db08e.jpg" border="0" />
					</a>
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="#">手册网
					</a>
				</dt>
				<dd>
					<a href="#">
						<img src="//ku.shouce.ren/files/images/201601/56a0834a0da07.jpg" border="0" />
					</a>
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="#">人间仙境
					</a>
				</dt>
				<dd>
					<a href="#">
						<img src="//ku.shouce.ren/files/images/201601/56a0834a1e4e0.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="/soft/6660.shtml" 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代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

菜单导航

描述

CSS+Js图片切换技术，类似的已有不少了，这一个使用了遮罩过渡的效果，同样应用到了TAB选项卡上，本页面仅是为了演示，大家用时候把它拆分开来，这个效果也对学习图片效果制作很有帮助。