发个[焦点图片+tab]-随机切换效果，看西湖烟花归来兮 [复制链接]

ckoog　楼主

吃了睡

高级会员

帖子: 335
体力: 789
威望: 4
居住地: 浙江省杭州市

发表于 2009-10-24 18:12:47 |显示全部楼层

这是以前做的2个效果合在一起的，改进过。
1.仿FLASH的焦点图片效果 http://bbs.blueidea.com/thread-2920132-1-1.html
2.[原创] 16种遮罩效果！http://bbs.blueidea.com/thread-2948491-1-1.html
有人回复说我那个遮罩效果用处不大，所以今天就把这个遮罩效果用在焦点图片上了
注释不是很多，哈哈。19：45烟花大会就开始了，赶紧发了再说。
-------------------------------------------------------------------------------------------------------
看烟花归来，人山人海啊，美女多多啊。
话说我欣赏完烟花和美女，茅塞顿开，于是乎又弄了个tab切换的效果

为了节约代码，2个效果放在了一起。

<!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>焦点图片效果 - 吃了睡作</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-image: url(http://www.hwj123.com/img/loading.gif);
	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-image:url(http://www.hwj123.com/img/b_l.gif);
	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;background-image:url(http://www.hwj123.com/img/b_r.gif);background-repeat:no-repeat;background-position:right top;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();//若不需要重复动画，把这句注释，上句不注释
	 }
	 
};

/////////////////////////////////////////////以下是TAB的代码/////////////////////////////////////////////////
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;
   //ele.blur();//解决虚线框问题
   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();
   //alert(li.getElementsByTagName("UL")[0].offsetHeight)
  };
}
</script>
</head>
<body>
<div class="imgFlash" id="box">
	   <dl>
	    <dt><a href="#">桌面神探</a></dt>
		<dd><a href="#"><img src="http://www.hwj123.com/pics/1.gif" border="0" /></a></dd>
	   </dl>
	   <dl>
	    <dt><a href="#">让你的传真机</a></dt>
		<dd><a href="#"><img src="http://www.hwj123.com/pics/2.gif" border="0" /></a></dd>
	   </dl>
	   <dl>
	    <dt><a href="#">菜鸟也能制作flash动画</a></dt>
		<dd><a href="#"><img src="http://www.hwj123.com/pics/3.gif" border="0" /></a></dd>
	   </dl>
</div>
<br />
<br /> 
<br />
<br />
<div class="tab" id="tab1">
<ul>
 <li class="d"><a href="javascript:;">我可是美工</a>
   <ul>
     <li><a href="http://www.hwj123.com/blog/post/8.html">1. 什么是虚拟主机？ </a></li>
     <li><a href="http://www.hwj123.com/blog/post/11.html">2. 什么叫域名转向？</a></li>
     <li><a href="http://www.hwj123.com/blog/post/10.html">3. 域名与网址有什么区别？</a></li>
     <li><a href="http://www.hwj123.com/blog/post/13.html">4. 什么是Internet域名?</a></li>
     <li><a href="http://www.hwj123.com/blog/post/12.html">5. 如何查询我想要的域名能否注册...</a></li>
     <li><a href="http://www.hwj123.com/blog/post/9.html">6. 什么是域名解析？</a></li>
   </ul>
  </li>
  <li><a href="javascript:;">标题短点</a>
	<ul>
	 <li><a href="http://www.hwj123.com/blog/post/17.html">1. SEO基本功，常用技巧。</a></li>
     <li><a href="http://www.hwj123.com/blog/post/16.html">2. 螳螂捕蝉：SEO与SPAM</a></li>
     <li><a href="http://www.hwj123.com/blog/post/15.html">3. SEO是什么？与spam有什么区别呢...</a></li>
     <li><a href="#">4. 什么是PV 什么是UV 什么是PR ?</a></li>
	 <li><a href="#">5. 哈哈哈哈，不变换效果不好</a></li>
     <li><a href="#">6. 内容要变化啊！</a></li>
    </ul>
  </li>
  <li><a href="javascript:;">再短</a>
	<ul>
	 <li><a href="http://www.hwj123.com/blog/post/17.html">1. 短了短了短了短了短了。</a></li>
     <li><a href="http://www.hwj123.com/blog/post/16.html">2. 内容不一样了啊，是的</a></li>
     <li><a href="#">3. 不懂不懂，我还是不懂...</a></li>
	 <li><a href="#">4. 哦也哦有饿哦也 ?</a></li>
	 <li><a href="#">5. 如何查嘿嘿要的能嘿嘿...</a></li>
     <li><a href="#">6. 哈哈是域名解析？</a></li>
    </ul>
  </li>
  <li><a href="javascript:;">短</a>
   <ul>
     <li><a href="http://www.hwj123.com/blog/post/8.html">1. 什么是内容不一样？ </a></li>
     <li><a href="http://www.hwj123.com/blog/post/11.html">2. 什么叫域名转向？</a></li>
     <li><a href="http://www.hwj123.com/blog/post/10.html">3. 域名与网址有什么区别？</a></li>
     <li><a href="http://www.hwj123.com/blog/post/13.html">4. 什么是Internet域名?</a></li>
     <li><a href="http://www.hwj123.com/blog/post/12.html">5. 如何查询我想要的域名能否注册...</a></li>
     <li><a href="http://www.hwj123.com/blog/post/9.html">6. 什么是域名解析？</a></li>
   </ul>
  </li>
</ul>
</div>

提示：您可以先修改部分代码再运行

要改变外观，比如宽和高，到css里修改。
以上效果很多东西都是在css里控制的。
兼容性嘛！兼容ie6，ie7，ie8，ff，其他的浏览器我还没用过！

[ 本帖最后由 ckoog 于 2009-10-25 01:04 编辑 ]

已有 1 人评分	威望	收起理由
cloudgamer	+ 1	谢谢分享

总评分: 威望 + 1 查看全部评分

每个{前端开发者}上辈子都是{折翼的天使} IE6你伤不起

		自动登录	找回密码
密码			注册

发个[焦点图片+tab]-随机切换效果，看西湖烟花归来兮 [复制链接]

回复 10# lcqlcq530 的帖子

浏览过的帖子

浏览过的版块