網(wǎng)頁(yè)特效代碼模板無(wú)憂>網(wǎng)頁(yè)特效>菜單導(dǎo)航特效代碼>

CSS+Js遮罩效果的TAB及焦點(diǎn)圖片切換_菜單導(dǎo)航特效

CSS+Js圖片切換技術(shù)，類似的已有不少了，這一個(gè)使用了遮罩過(guò)渡的效果，同樣應(yīng)用到了TAB選項(xiàng)卡上，本頁(yè)面僅是為了演示，大家用時(shí)候把它拆分開(kāi)來(lái)，這個(gè)效果也對(duì)學(xué)習(xí)圖片效果制作很有幫助。

<!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}
/*------焦點(diǎn)圖片的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;};//緩沖函數(shù)
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;
	}
};//事件監(jiān)聽(tīng)
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;
    }
};//移除監(jiān)聽(tīng)

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2011-02-24

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

欧美三区四区_av先锋影音资源站_亚洲第一论坛sis_影音先锋2020色资源网_亚洲精品社区_在线免费观看av网站_国产一区二区伦理_亚洲欧美视频一区二区_99视频精品全部免费在线_精精国产xxxx视频在线

CSS+Js遮罩效果的TAB及焦點(diǎn)圖片切換_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些