写了老半天的前端效果,居然没有用的上,就发布在这里吧

  这是一个模拟flash翻滚的效果, 用于前端的. 写的时候,我就尽量的期望他能够更绚丽一点. 最后因为模式等原因, 只能够实现到这个层次了.

  当然,可惜的是,公司没有采纳这个效果. 所以,我 就拿出来,供给大家参考一下吧.

 

 

<!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=utf-8" />
<title>hehe123—测试平台</title>
<style type="text/css">
*{margin:0;padding:0;border:0;font-size:12px;}
html,body{line-height:18px;font-family:"宋体,黑体,system";}
h1,h2,h3,h4,h5,h6{font-size:9pt;font-weight:normal;}
li,ol,ul{list-style:none outside;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
.l{float:left;display:inline;}
.r{float:right;display:inline;}
.c{clear:both;}
.po_a{position:absolute;}
.po_r{position:relative;}
.ov_h{overflow:hidden;}
.ov_a{overflow:auto;}
.ov_x_h{overflow-x:hidden;}
.ov_x_a{overflow-x:auto;}
.ov_y_h{overflow-y:hidden;}
.ov_y_a{overflow-y:auto;}
.dis_i{display:inline;}
.dis_b{display:block;}
.dis_n{display:none;}
.visb_h{visibility:hidden;}
.visb_v{visibility:visible;}
.tl_0{top:0;left:0;}
.tr_0{top:0;right:0;}
.bl_0{bottom:0;left:0;}
.br_0{bottom:0;right:0;}
.z1{z-index:1;}
.z2{z-index:2;}
.z3{z-index:3;}

#controlPart{width:120px;height:40px;border:1px #333 solid;position:absolute;display:none;background:#fff;overflow:hidden;}
#controlPart div{position:absolute;height:14px;width:120px;left:-120px;}

#ImgLPart{width:504px;height:274px;position:relative;overflow:hidden;border:1px #83bd22 solid;margin:0 auto;}
.ImgLPartimgList{width:500px;height:240px;position:relative;overflow:hidden;margin:2px;}
.ImgLPartimgList div{position:absolute;top:0;width:500px;height:240px;}
.ImgLPartimgList div img{width:100%;height:100%;}
.ImgLPartimgAnchor{height:24px;overflow:hidden;margin:5px 2px 0px 2px;padding:0 1px;}
.ImgLPartimgAnchor li{float:left;display:inline;width:164px;height:24px;margin:0 2px 0 0;}
.ImgLPartimgAnchor li a{display:block;height:18px;padding:6px 0 0 0;text-align:center;background:#bedf7c;color:#333;}
.ImgLPartimgAnchor li.s a{background:#7fbb1b;color:#fff;}

#infoPart{width:372px;height:220px;overflow:hidden;margin:20px auto;position:relative;}
.infoPartTop{clear:both;height:25px;border-bottom:2px #7fbb1b solid;padding:5px 0 0 10px;font-size:15px;color:#458141;}
.infoPartTop span.r{color:#666;font-size:13px;}
.infoPartMid{height:288px;overflow:hidden;position:relative;}
.infoPartMid div{clear:both;position:absolute;left:0;width:366px;background:#f4f8ea;height:20px;padding:4px 3px 0 3px;color:#2f5900;}
.infoPartMid div a{color:#000;text-decoration:none;}
</style>
</head>
<body>
	<br /> <br /><br /><br />
	                    <a href="javascript:void(0);" id="controlAnchor" >管理</a>
	<div id="controlPart">
		<div><a href="#">管理中心</a></div>
		<div><a href="#">纪念馆管理</a></div>
	</div>
	
	<br /><br />
	<div id="ImgLPart">
		<div class="ImgLPartimgList">
			<div><a href="#"><img src='http://img2.cache.netease.com/cnews/2010/4/9/2010040907304329c00.jpg' alt='001' /></a></div>
			<div><a href="#"><img src='http://img2.cache.netease.com/cnews/2010/4/9/20100409083124db9aa.jpg' alt='002' /></a></div>
			<div><a href="#"><img src='http://img2.cache.netease.com/cnews/2010/4/9/20100409081214e7734.jpg' alt='002' /></a></div>
		</div>
		<div class="ImgLPartimgAnchor">
			<li class="s"><a href="javascript:void(0);">我建立了一个选择 1</a></li>
			<li><a href="javascript:void(0);">我建立了一个选择 2</a></li>
			<li><a href="javascript:void(0);">我建立了一个选择 3</a></li>
		</div>
	</div>
	
	<div id="infoPart">
		<div class="infoPartTop">
			<span class="l">过去1小时</span>
			<span class="r">2903位用户加入</span>
		</div>
		<div class="infoPartMid">
			<div><span class="l">XXX在 <a href="#">海子</a>挂了,我给送了 一把吉他1</span><span class="r">18分23秒前</span></div>
			<div><span class="l">XXX在 <a href="#">海子</a>挂了,我给送了 一把吉他2</span><span class="r">18分23秒前</span></div>
			<div><span class="l">XXX在 <a href="#">海子</a>挂了,我给送了 一把吉他3</span><span class="r">18分23秒前</span></div>
			<div><span class="l">XXX在 <a href="#">海子</a>挂了,我给送了 一把吉他4</span><span class="r">18分23秒前</span></div>
			<div><span class="l">XXX在 <a href="#">海子</a>挂了,我给送了 一把吉他5</span><span class="r">18分23秒前</span></div>
			<div><span class="l">XXX在 <a href="#">海子</a>挂了,我给送了 一把吉他6</span><span class="r">18分23秒前</span></div>
			<div><span class="l">XXX在 <a href="#">海子</a>挂了,我给送了 一把吉他7</span><span class="r">18分23秒前</span></div>
			<div><span class="l">XXX在 <a href="#">海子</a>挂了,我给送了 一把吉他8</span><span class="r">18分23秒前</span></div>
			<div><span class="l">XXX在 <a href="#">海子</a>挂了,我给送了 一把吉他9</span><span class="r">18分23秒前</span></div>
			<div><span class="l">XXX在 <a href="#">海子</a>挂了,我给送了 一把吉他10</span><span class="r">18分23秒前</span></div>
		</div>
	</div>	
	<script type="text/javascript">
	function $(id){return "string"==typeof id?document.getElementById(id):id;}
	function EventHandler(pot,element,evtName,callback,useCapture){
		pot == "add"? element.addEventListener?element.addEventListener(evtName, callback, useCapture):element.attachEvent('on' + evtName, callback) : element.addEventListener?element.removeEventListener(evtName.slice(2),callback,useCapture):element.detachEvent(evtName,callback);
	}
	function itemDelay(o,a,b,e,callback,speed){
		var st = +new Date(),p,speed = speed || 300,it = setInterval(function(){
			p = (+new Date() - st)/speed;
			if(p >= 1) o.style[a] = e+"px",callback && callback(),clearInterval(it);
			o.style[a] = b + (e - b)*((-Math.cos(Math.PI*p)/2)+0.5)+"px";
		},10); 
	}
	function opacityDelay(o,b,e,callback,speed){
		var st = +new Date(),p,speed = speed || 300,it = setInterval(function(){
			p = (+new Date()-st)/speed;
			if(p >=1)o.style.filter="alpha(opacity="+e+")",o.style.opacity=e/100,callback && callback(),clearInterval(it);
			var es = b+(e-b)*((-Math.cos(Math.PI*p)/2)+0.5);
			o.style.filter="alpha(opacity="+es+")",o.style.opacity=es/100;
		},10);
	}
	var tsControlList = {
		aid:null,lid:null,init:function(){
			var P = this,aid = P.aid,lid = P.lid;
			if(aid == null || lid == null)return;
			lid.style.height = "1px";
			for(var i = 0,os = lid.children,len = os.length;i< len;i++)os[i].style.top = i*18+"px";			
			aid.touch = true,aid.onclick = function(event){
				var p = this,lid = tsControlList.lid,pl = p.offsetLeft,pt = p.offsetTop;
				if(!aid.touch && lid.offsetHeight > 35) return;
				while(p = p.offsetParent){
					pl += p.offsetLeft,pt += p.offsetTop,p.offsetParent && (pl -= p.parentNode.scrollLeft,pt -= p.parentNode.scrollTop);
				}
				lid.style.left = pl - 20+"px",lid.style.top = pt + 15+"px",lid.style.display = "block";
				aid.touch = false,itemDelay(lid,"height",lid.offsetHeight,40,function(){
					var son = lid.children,snum = son.length,unum = 0,st = setInterval(function(){
						itemDelay(son[unum],"left",son[unum].offsetLeft,0,unum != snum -1?null:function(){
							aid.touch = false;							
						},150),unum++,unum == snum && (clearInterval(st),setTimeout(function(){
							for(var i = 0,len = son.length;i < len;i++)son[i].style.left = "0px";
						},150));
					},80);
				},110);
			}
			EventHandler("add",$("controlPart"),"mouseover",function(){
				var p = $("controlPart");
				clearTimeout(p.out),p.touch = true,aid.tocuh = false,p.onmouseout = function(){
					p.out = setTimeout(function(){
						p.touch = false,setTimeout(function(){
							if(p.touch)return;
							var son = p.children,unum = son.length-1,snum = 0,st = setInterval(function(){
								itemDelay(son[unum],"left",son[unum].offsetLeft,-120,unum != 0?null:function(){
									itemDelay(p,"height",p.offsetHeight,1,function(){
										p.style.display = "none",aid.touch = true;
									},110);
								},150),unum--,unum == -1 && (clearInterval(st),setTimeout(function(){
											aid.touch = true;
											for(var i = 0,len = son.length;i < len;i++)son[i].style.left = "-120px";
										},150));
							},80);
						},100);
					},1);
				}
			},false);
		}
	},tsImgsList = {
		aid:null,move:null,sel:0,init:function(){
			var P = this,aid = P.aid,sel = P.sel;
			if(!aid && !aid.children[0] && !aid.children[1])return;
			var aidc0 =aid.children[0],aidc1 = aid.children[1];
			aidc0.move = false;
			for(var i = 0,os = aidc0.children,len = os.length;i < len;i++){
				os[i].style.left = i*500+"px",os[i].onmouseover = function(){
					var p = this;
					clearTimeout(p.goon),aidc0.move = true,p.onmouseout = function(){
						p.goon = setTimeout(function(){
							aidc0.move = false;
						},1);
					}
				}
			}for(var i = 0,os = aidc1.children,len = os.length;i < len;i++){
				os[i].si = i,os[i].onclick = function(){
					if(this.si == P.sel )return;
					var p = this;
					for(var j = 0,ps = aidc0.children,len_j = ps.length;j < len_j;j++)itemDelay(aidc0.children[j],"left",500*(j-P.sel),500*(j-p.si),null,230);
					aidc1.children[P.sel].className = "",aidc1.children[p.si].className = "s",P.sel = p.si; 
				}
			}
			P.rec = setInterval(function(){
				if(aidc0.move)return;
				var ps = aidc0.children,len_ps = ps.length - 1,nums = P.sel == len_ps ? 0 : P.sel+1;
				for(var i = 0,len_i = ps.length;i < len_i;i++)itemDelay(aidc0.children[i],"left",500*(i-P.sel),500*(i-nums),null,230) 
				aidc1.children[P.sel].className = "",aidc1.children[nums].className = "s",P.sel = nums;
			},3000);
		},rec: null
	},tsInfoList = {
		aid:null,move:null,nlen:0,ulen:0,init:function(){
			var P = this,aid = P.aid,d = document,mask = d.createElement("div"),aidson = aid.children;
			mask.style.cssText = "position:absolute;z-index:3;left:0;top:32px;background:#000;filter:alpha(opacity=80);opacity:0.8;color:#fff;padding:80px 0 0 0;text-align:center;width:100%;height:"+(aid.offsetHeight-70)+"px;";
			mask.innerHTML = "正在载入中,请梢候..."
			$("infoPart").appendChild(mask);
			if(aidson.length < 6){
				for(var i = 0,len = 6 - aidson.length;i <= len;i++){
					var div = aidson[i].cloneNode(true);					
					aid.appendChild(div);
				}
				P.nlen = 1;
			}else{
				var slen = aidson.length % 6;
				P.nlen = Math.floor(aidson.length/6);
				for(var i = 0,len = 6-slen;i < len;i++){
					var div = aidson[i].cloneNode(true);
					aid.appendChild(div);
				}
			}
			aid.goon = true,EventHandler("add",aid,"mouseover",function(){
				var p = $("infoPart").children[1];
				p.goon = false,clearTimeout(p.cango),p.onmouseout = function(){
					p.cango = setTimeout(function(){
						p.goon = true;
					},1);
				}
			},false);
			for(var i = 0,len = aidson.length;i < len;i++) aidson[i].style.top = 32*i+"px",i >= 6 && (aidson[i].style.display = "none");
			opacityDelay(mask,100,5,function(){
				$("infoPart").removeChild(mask);
				P.move = setInterval(function(){
					if(!aid.goon) return;
					var gnum = P.ulen,unum = 0,goes = setInterval(function(){
						itemDelay(aidson[gnum*6+unum],"top",aidson[gnum*6+unum].offsetTop,-28,function(os){
							setTimeout(function(){
								os.style.top = "190px",os.style.display = "none";
							},1000);
						}(aidson[gnum*6+unum]),500-unum*30),unum == 5 && (clearInterval(goes),setTimeout(function(){
							var tnum = gnum +1 > P.nlen ? 0 :gnum+1,znum = 0,dose;
							for(var i = 0;i < 6;i++)aidson[tnum*6+i].style.display = "block",aidson[tnum*6+i].style.top = "190px";
							dose = setInterval(function(){
								itemDelay(aidson[tnum*6+znum],"top",190,32*znum,null,320+30*znum),znum==5&&clearInterval(dose),znum++;
							},120);
						},100)),unum++;
					},120);
					P.ulen = P.ulen +1 > P.nlen ? 0 :P.ulen+1;
				},6500);
			},550);
		}
	}
	tsControlList.aid = $("controlAnchor"),tsControlList.lid = $("controlPart"),tsControlList.init();
	tsImgsList.aid = $("ImgLPart"),tsImgsList.init();
	tsInfoList.aid = $("infoPart").children[1],tsInfoList.init();
	</script>
</body>
</html>		

 

 

具体的代码含义,我 就不一样分析了, 是一 个很好的 列式表, 呵呵.

posted on 2010-04-13 21:35  Hehe123  阅读(390)  评论(2编辑  收藏  举报