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