当前位置：首页 → 问答吧 → 分享一个仿阿里巴巴字母轮换效果！

分享一个仿阿里巴巴字母轮换效果！

时间：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=gb2312" /> <title>字母轮换</title> </head> <style type="text/css"> body{margin:0px 0px 0px 0px;padding:0;font-size:12px;font-family:"宋体"} div{ margin:0 auto;} p,form,ul,dl,ol,li,dt,dd,h1,h2,h3{margin:0;padding:0;list-style:none;} h2,h3{font-size:13px;font-weight:bold;} img{border:0;} a{color:#4a4949;text-decoration:none;} a:hover{color:#ff3300;text-decoration:underline;} /*charindex*/ .indexwrap{position:relative;top:0;left:0;width:900px; margin:0 auto} .charindex{background:#f4f4f4} .charindex{font-size:14px;height:37px;line-height:36px;padding:0 8px;border-left:1px solid #D2D2D2;border-right:1px solid #D2D2D2;background-position:0 -286px;font-family:helvetica,arial;font-size:16px;} .charindex ul{position:relative;top:1px;width:100%;height:37px;overflow:hidden;z-index:13;} .charindex li{float:left;width:30px;text-align:center;} .charindex li.t{width:85px;} .charindex strong{padding:0 0 0 8px;} .charindex span{display:inline-block;cursor:pointer;font-weight:bold;color:#666666; border-top:#f4f4f4 solid 1px} .charindex span.on{width:28px;border:1px solid #EAB295;border-bottom:1px solid #FFF6de;background-color:#FFF6DE;} .charcont{position:absolute;width:888px;left:0;top:37px;padding:5px;line-height:25px;border:1px solid #EAB295;background-color:#FFF6de;z-index:10;font-size:12px;} .charcont li{float:left;width:103px;text-align:center;white-space:nowrap;overflow:hidden;} .charcont li.none{overflow:visible;width:100%;text-align:center;} </style> <body> <div class="indexwrap"> <div class="charindex"> <ul> <li><span onMouseOver="showIndex(this,'a')" onmouseout="hideIndex(this,'a',event)">A</span></li> <li><span onMouseOver="showIndex(this,'b')" onmouseout="hideIndex(this,'b',event)">B</span></li> <li><span onMouseOver="showIndex(this,'c')" onmouseout="hideIndex(this,'c',event)">C</span></li> <li><span onMouseOver="showIndex(this,'d')" onmouseout="hideIndex(this,'d',event)">D</span></li> <li><span onMouseOver="showIndex(this,'e')" onmouseout="hideIndex(this,'e',event)">E</span></li> <li><span onMouseOver="showIndex(this,'f')" onmouseout="hideIndex(this,'f',event)">F</span></li> <li><span onMouseOver="showIndex(this,'g')" onmouseout="hideIndex(this,'g',event)">G</span></li> <li><span onMouseOver="showIndex(this,'h')" onmouseout="hideIndex(this,'h',event)">H</span></li> <li><span onMouseOver="showIndex(this,'i')" onmouseout="hideIndex(this,'i',event)">I</span></li> <li><span onMouseOver="showIndex(this,'j')" onmouseout="hideIndex(this,'j',event)">J</span></li> <li><span onMouseOver="showIndex(this,'k')" onmouseout="hideIndex(this,'k',event)">K</span></li> <li><span onMouseOver="showIndex(this,'l')" onmouseout="hideIndex(this,'l',event)">L</span></li> <li><span onMouseOver="showIndex(this,'m')" onmouseout="hideIndex(this,'m',event)">M</span></li> <li><span onMouseOver="showIndex(this,'n')" onmouseout="hideIndex(this,'n',event)">N</span></li> <li><span onMouseOver="showIndex(this,'o')" onmouseout="hideIndex(this,'o',event)">O</span></li> <li><span onMouseOver="showIndex(this,'p')" onmouseout="hideIndex(this,'p',event)">P</span></li> <li><span onMouseOver="showIndex(this,'q')" onmouseout="hideIndex(this,'q',event)">Q</span></li> <li><span onMouseOver="showIndex(this,'r')" onmouseout="hideIndex(this,'r',event)">R</span></li> <li><span onMouseOver="showIndex(this,'s')" onmouseout="hideIndex(this,'s',event)">S</span></li> <li><span onMouseOver="showIndex(this,'t')" onmouseout="hideIndex(this,'t',event)">T</span></li> <li><span onMouseOver="showIndex(this,'u')" onmouseout="hideIndex(this,'u',event)">U</span></li> <li><span onMouseOver="showIndex(this,'v')" onmouseout="hideIndex(this,'v',event)">V</span></li> <li><span onMouseOver="showIndex(this,'w')" onmouseout="hideIndex(this,'w',event)">W</span></li> <li><span onMouseOver="showIndex(this,'x')" onmouseout="hideIndex(this,'x',event)">X</span></li> <li><span onMouseOver="showIndex(this,'y')" onmouseout="hideIndex(this,'y',event)">Y</span></li> <li><span onMouseOver="showIndex(this,'z')" onmouseout="hideIndex(this,'z',event)">Z</span> </li> </ul> </div> <div class="charcont" id="index-a" style="display: none"> aaaaaaaaaaaaaaa </div> <div class="charcont" id="index-b" style="display: none"> BBBBBBBBBBBBBB </div> <div class="charcont" id="index-c" style="display: none"> cccccccccccccccc </div> <div class="charcont" id="index-d" style="display: none"> ddddddddddd </div> <div class="charcont" id="index-e" style="display: none"> eeeeeeeeeeeeeee </div> <div class="charcont" id="index-f" style="display: none"> ffffffffffffffff </div> <div class="charcont" id="index-g" style="display: none"> ggggggggggggggggg </div> <div class="charcont" id="index-h" style="display: none"> hhhhhhhhhhhhhhhhh </div> <div class="charcont" id="index-i" style="display: none"> iiiiiiiiiii </div> <div class="charcont" id="index-j" style="display: none"> jjjjjjjjjj </ul></div> <div class="charcont" id="index-k" style="display: none"> kkkkkkkkkkk </div> <div class="charcont" id="index-l" style="display: none"> llllllllll </div> <div class="charcont" id="index-m" style="display: none"> mmmmmmmmmmmmmmmmm </div> <div class="charcont" id="index-n" style="display: none"> nnnnnnnnnnnnnnn </div> <div class="charcont" id="index-o" style="display: none"> ooooooooooooooo </div> <div class="charcont" id="index-p" style="display: none"> ppppppppppppp </div> <div class="charcont" id="index-q" style="display: none"> qqqqqqqqq </div> <div class="charcont" id="index-r" style="display: none"> rrrrrrrrrrr </div> <div class="charcont" id="index-s" style="display: none"> sssssssssss </div> <div class="charcont" id="index-t" style="display: none"> tttttttttttt </div> <div class="charcont" id="index-u" style="display: none"> uuuuuuuuuuu </div> <div class="charcont" id="index-v" style="display: none"> vvvvvvvvvv </div> <div class="charcont" id="index-w" style="display: none"> wwwwwwwwwww </div> <div class="charcont" id="index-x" style="display: none"> xxxxxxxxxxx </div> <div class="charcont" id="index-y" style="display: none"> yyyyyyyyyyyyy </div> <div class="charcont" id="index-z" style="display: none"> zzzzz </div> </div> <script src="http://zy.178.com/s/i/new/zm.js" type="text/javascript" ></script> <div style=" width:900px; height:600px; background:#000000; margin:0 auto"> dasdasdasda </div> </body> </html>
提示：您可以先修改部分代码再运行

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

不错...

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

分享一个仿阿里巴巴字母轮换效果！

热门阅读

热门下载