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

发布时间：2018-08-20 16:58:20 所属栏目：访谈来源：站长网

导读：在早年的教程中，猛火曾经多次先容滑动门给各人，其它尚有一些滑动的菜单，本日要给伴侣先容的也是个中一例，也许有许多伴侣都见过，这就是仿阿里巴巴的字母菜单滑动殊效。这个字母轮换着实就是一个较量大的滑动门，至少来说道理是一样的，代码由 Java Sc

　　在早年的教程中，猛火曾经多次先容滑动门给各人，其它尚有一些滑动的菜单，本日要给伴侣先容的也是个中一例，也许有许多伴侣都见过，这就是仿阿里巴巴的字母菜单滑动殊效。

　　这个字母轮换着实就是一个较量大的滑动门，至少来说道理是一样的，代码由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 (/<b>Firefox</b>/.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>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!