当前位置：首页 → 问答吧 → 相册渐变效果

相册渐变效果

时间：2010-06-01

来源：互联网

这个效果终于写好了，思路还是不清晰
也太懒

<!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>不知道</title> <style type="text/css"> *{margin:0;padding:0 ; } div{width:300px;height:300px;overflow:hidden; } ul#t{position:relative; width: 100%;height: 100%;} ul#t li{ float:left;position:absolute; top:0;left:0 ;width: 100%;height: 100%; background:#fff;word-wrap:break-word;display:none; } ul#t li img{width: 100%;height: 100%;} ul#t li.cur{display:block;} ul#p{} ul#p li{width:100px;float:left; height:40px;overflow:hidden;background:#cf0; } ul#p li.cur{background:#09e; } </style> </head> <body> <div> <ul id="t"> <li class="cur"><img src="http://bbs.51js.com/images/default/logo.gif" /></li> <li ><img src="http://bbs.blueidea.com/images/default/logo.gif" /></li> <li ><img src="http://www.javaeye.com/upload/logo/user/140680/8b5d1675-cdba-3cb7-8682-1c9ba0174e40.jpg?1251274936" /></li> </ul> </div> <ul id="p"> <li class="cur">11111111111111111111111</li> <li >222222222222222222222</li> <li >333333333333333333333</li> </ul> <script type="text/javascript"> function photo(){ var j,i=1,m=1,d=document,e=d.getElementById('p').getElementsByTagName('li'); var fade=function(o){ var n=0; var step=function(){ var val=!-[1,]?n:(n/100); o.style.cssText='z-index:'+m+';filter:Alpha(opacity='+val+');opacity:'+val+';'; if(n<100){ n+=2; autoStep=setTimeout(step,10); }else{ auto=setTimeout(function(){movie(d.getElementById('t').getElementsByTagName('li'))},3000) } }; autoStep=setTimeout(step,10); }; var movie=function(o){ for(j=0;j<e.length;j+=1){ e[j]['className']=''; } o[i].style.cssText='filter:Alpha(opacity=0);opacity:0'; o[i]['className']='cur'; e[i]['className']='cur'; fade(o[i]); i+=1; m+=1; (function(o){ for(var j=0;j<o.length;j++){ (function(j){ o[j].onmouseover=function(){ if(autoStep)clearTimeout(autoStep); if(auto)clearTimeout(auto); o[j]['className']='cur'; i=j; auto=setTimeout(function(){movie(d.getElementById('t').getElementsByTagName('li'))},0) } })(j) } })(e) if(i>=o.length) i=0; } auto=setTimeout(function(){movie(d.getElementById('t').getElementsByTagName('li'))},3000) } photo() </script> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 kouyubo 于 2010-6-1 14:46 编辑 ]

作者: kouyubo 发布时间: 2010-06-01

相册渐变效果

热门阅读

热门下载