仿阿里巴巴字母滑动门效果[javascrip+css]

　　在以前的教程中，烈火曾经多次介绍滑动门给大家，另外还有一些滑动的菜单，今天要给朋友介绍的也是其中一例，可能有很多朋友都见过，这就是仿阿里巴巴的字母菜单滑动特效。

　　这个字母轮换其实就是一个比较大的滑动门，至少来说原理是一样的，代码由JavaScript+CSS完成，效果和UI都不错，只是代码有点冗长，高手们可以精简一下。

　　看实例吧：

<!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>仿阿里巴巴字母轮换 - Liehuo.net</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 http://www.veryhuo.com */ .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> <script> (function() { var timer; var popIndex = -1; var popCtrl = document.getElementById('popctrl').getElementsByTagName('a'); for (var i = 1; i < popCtrl.length; i++) { popCtrl[i].onmouseover = function(i) { return function() { timer = window.setTimeout(function () { this.className = 'titleon'; if (popIndex != -1 && popIndex != i) { popCtrl[popIndex].className = 'title'; document.getElementById('pop' + popIndex).style.display = 'none'; } showPop(i); popIndex = i; }, 250); } } (i) popCtrl[i].onmouseout = function(i) { return function(evt) { clearTimeout(timer); var popWrap = document.getElementById('pop' + i); if (/<a href='http://www.veryhuo.com/z/firefox/' target='_blank'><b>Firefox</b></a>/.test(window.navigator.userAgent)) { if (!(this.compareDocumentPosition(evt.relatedTarget) & 16) && popWrap != evt.relatedTarget) { popCtrl[i].className = "title"; popWrap.style.display = 'none'; return; } popWrap.onmouseout = function(i) { return function(evt) { if (!(this.compareDocumentPosition(evt.relatedTarget) & 16) && popWrap != evt.relatedTarget) { popCtrl[i].className = "title"; this.style.display = 'none'; } } } (i) return; } if (!popWrap.contains(event.toElement)) { popCtrl[i].className = "title"; popWrap.style.display = 'none'; return; } popWrap.onmouseout = function(i) { return function() { if (!this.contains(event.toElement)) { popCtrl[i].className = "title"; this.style.display = 'none'; } } } (i) } } (i) } function showPop(num) { document.getElementById('pop' + num).style.display = 'block'; } })(); (function() { var subIndex = 0; var subCtrls = document.getElementById('subctrl').getElementsByTagName('li'); subCtrls[0].className = 'focus'; for (var i = 0; i < subCtrls.length; i++) { subCtrls[i].onmouseover = function(i) { return function() { if (i == subIndex) return; subCtrls[i].className = 'focus'; subCtrls[subIndex].className = ''; document.getElementById('subcnt' + subIndex).style.visibility = 'hidden'; document.getElementById('subcnt' + i).style.visibility = 'visible'; subIndex = i; } } (i) } })(); function gradient(id) { var oId = document.getElementById(id); var tmp = 0; var autoGra = setInterval(function() { tmp += 10; oId.style.opacity = tmp * .01; oId.style.filter = 'alpha(opacity=' + tmp + ')'; if (tmp >= 100) clearInterval(autoGra) }, 10) } function gradientHd(id) { var oId = document.getElementById(id) oId.style.opacity = 0; oId.style.filter = 'alpha(opacity=0)'; } function ballTab(ctrl, cntpre, cwrap, isAuto, timeout) { var exhIndex = 0; var autoBall = setInterval(changeTab, 7000); if (timeout) { clearInterval(autoBall); setTimeout(function() { autoBall = setInterval(changeTab, 7000) }, 2300) } var exhCtrls = document.getElementById(ctrl).getElementsByTagName('span'); for (var i = 0; i < exhCtrls.length; i++) { exhCtrls[i].onmouseover = function(i) { return function() { if (i == exhIndex) return; exhCtrls[i].className = 'on'; exhCtrls[exhIndex].className = ''; document.getElementById(cntpre + i).style.visibility = 'visible'; gradient(cntpre + i); document.getElementById(cntpre + exhIndex).style.visibility = 'hidden'; gradientHd(cntpre + exhIndex); exhIndex = i; } } (i) } document.getElementById(ctrl).onmouseover = document.getElementById(cwrap).onmouseover = function() { clearInterval(autoBall); } document.getElementById(ctrl).onmouseout = document.getElementById(cwrap).onmouseout = function() { autoBall = setInterval(changeTab, 7000); } var ballNum = exhCtrls.length; function changeTab() { if (exhIndex >= ballNum-1 && !isAuto) { clearInterval(autoBall); document.getElementById(ctrl).onmouseover = document.getElementById(cwrap).onmouseover = document.getElementById(ctrl).onmouseout = document.getElementById(cwrap).onmouseout = null; } exhCtrls[exhIndex].className = ''; exhCtrls[(exhIndex + 1) % ballNum].className = 'on'; document.getElementById(cntpre + exhIndex).style.visibility = 'hidden'; gradientHd(cntpre + exhIndex); document.getElementById(cntpre + (exhIndex + 1) % ballNum).style.visibility = 'visible'; gradient(cntpre + (exhIndex + 1) % ballNum); exhIndex++; exhIndex %= ballNum; } } ballTab('exhctrl', 'exhcnt', 'exhwrap', true) ballTab('bsyctrl', 'bsycnt', 'bsywrap', false,true) function normTab(ctrl, cnt, more) { var blueIndex = 0; var blCtrls = document.getElementById(ctrl).getElementsByTagName('li'); for (var i = 0; i < blCtrls.length; i++) { blCtrls[i].onmouseover = function(i) { return function() { if (i == blueIndex) return; blCtrls[i].className = 'focus'; blCtrls[blueIndex].className = ''; document.getElementById(cnt + i).style.display = 'block'; document.getElementById(more + i).style.display = 'block'; document.getElementById(cnt + blueIndex).style.display = 'none'; document.getElementById(more + blueIndex).style.display = 'none'; blueIndex = i; } } (i) } } normTab('bluectrl', 'bluecnt', 'stockmore'); normTab('orgctrl', 'orgcnt', 'unionmore'); (function() { var lgIndex = 0; var logCtrls = document.getElementById('logctrl').getElementsByTagName('li'); for (var i = 0; i < logCtrls.length; i++) { logCtrls[i].onmouseover = function(i) { return function() { if (i == lgIndex) return; logCtrls[lgIndex].className = ''; switch (i) { case 0: logCtrls[i].className = 'fstfocus'; break; case 3: logCtrls[i].className = 'lstfocus'; break; default: logCtrls[i].className = 'focus'; break; } document.getElementById('logincnt' + lgIndex).style.visibility = 'hidden'; document.getElementById('logincnt' + i).style.visibility = 'visible'; lgIndex = i; } } (i) } })(); (function() { var scrCtrl = document.getElementById('scrlup'); var list1 = document.getElementById('scrlul'); var list2 = document.getElementById('scrlul2'); list2.innerHTML = list1.innerHTML; var auto = setInterval(scrlUp, 5000); function scrlUp() { if (scrCtrl.scrollTop >= scrCtrl.scrollHeight / 2) scrCtrl.scrollTop -= list1.offsetHeight; var delay = 0; var auto = setInterval(function() { scrCtrl.scrollTop++; delay++; if (delay >= 23) clearInterval(auto); }, 10) } scrCtrl.onmouseover = function() { clearInterval(auto); } scrCtrl.onmouseout = function() { auto = setInterval(scrlUp, 5000); } })(); /*industry sort*/ function showIndex(obj, num) { tm = window.setTimeout(function () { obj.className = 'on'; document.getElementById('index-' + num).style.display = 'block'; }, 250); } function hideIndex(obj, num, e) { clearTimeout(tm); var owrap = document.getElementById('index-' + num); if (/Firefox/.test(window.navigator.userAgent)) { if (!(owrap.compareDocumentPosition(e.relatedTarget) & 16) && owrap != e.relatedTarget) { obj.className = ""; owrap.style.display = 'none'; return; } owrap.onmouseout = function(evt) { if (!(this.compareDocumentPosition(evt.relatedTarget) & 16) && this != evt.relatedTarget) { obj.className = ""; this.style.display = 'none'; } } return; } if (owrap.contains(e.toElement)) { owrap.onmouseout = function() { if (this.contains(event.toElement)) { return; } this.style.display = 'none'; obj.className = ''; } return; } obj.className = ''; owrap.style.display = 'none'; } </script> <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"> 这是A的标签 </div> <div class="charcont" id="index-b" style="display: none"> 这是B的标签 </div> <div class="charcont" id="index-c" style="display: none"> 这是c的标签 </div> <div class="charcont" id="index-d" style="display: none"> 这是D的标签 </div> <div class="charcont" id="index-e" style="display: none"> 这是E的标签 </div> <div class="charcont" id="index-f" style="display: none"> 这是F，不用说了吧？ </div> <div class="charcont" id="index-g" style="display: none"> 我说烦了。 </div> <div class="charcont" id="index-h" style="display: none"> 开始做广告 </div> <div class="charcont" id="index-i" style="display: none"> 烈火学院 www.veryhuo.com </div> <div class="charcont" id="index-j" style="display: none"> 这里是JJJJ标签 </ul></div> <div class="charcont" id="index-k" style="display: none"> 站长不赚钱？上烈火网！ </div> <div class="charcont" id="index-l" style="display: none"> 电脑知识丰富的网络学院 </div> <div class="charcont" id="index-m" style="display: none"> www.veryhuo.com </div> <div class="charcont" id="index-n" style="display: none"> 烈火百科 baike.liehuo.net </div> <div class="charcont" id="index-o" style="display: none"> 站长工具 tool.liehuo.net </div> <div class="charcont" id="index-p" style="display: none"> 烈火论坛 bbs.liehuo.net </div> <div class="charcont" id="index-q" style="display: none"> 这个滑动效果不错吧？ </div> <div class="charcont" id="index-r" style="display: none"> 欢迎提供稿件给烈火 </div> <div class="charcont" id="index-s" style="display: none"> 烈火投稿：master#liehuo.org </div> <div class="charcont" id="index-t" style="display: none"> 广告招租，QQ：32619959 </div> <div class="charcont" id="index-u" style="display: none"> 这里已经是U标签了 </div> <div class="charcont" id="index-v" style="display: none"> 即将结束 </div> <div class="charcont" id="index-w" style="display: none"> W标签 </div> <div class="charcont" id="index-x" style="display: none"> 记住烈火了吗 </div> <div class="charcont" id="index-y" style="display: none"> 祝您好运！ </div> <div class="charcont" id="index-z" style="display: none"> 烈火网络学院 </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!