CSS+Js遮罩效果的TAB及焦点图片切换_菜单导航特效

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" mrc="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;
    }
};//移除监听

所属频道：菜单导航特效/更新时间：2011-02-24

[收藏][报错][返回列表]

CSS+Js遮罩效果的TAB及焦点图片切换_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些