写了老半天的前端效果,居然没有用的上,就发布在这里吧
这是一个模拟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>
具体的代码含义,我 就不一样分析了, 是一 个很好的 列式表, 呵呵.
