CSS+JavaScript仿阿里巴巴字母轮换

2024-09-05 12:20:35

字体：大中小

来源：转载

供稿：网友

这是仿阿里巴巴字母轮换的效果，以前有一款TAB滑动门和这个极其相信，那款来自淘宝。这个字母轮换其实就是一个比较大的滑动门，至少来说原理是一样的，希望大家好好研究一下。

<!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;}.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 (/Firefox/.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">	BBBBBBBBBBBBBB	</div>	<div class="charcont" id="index-c" style="display: none">	CCCC	</div>	<div class="charcont" id="index-d" style="display: none">	DDDDDD	</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">	IIIIII	</div>	<div class="charcont" id="index-j" style="display: none">	JJJJJJJJJJJJ	</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></body></html>

上一篇：jQuery 菜单，可智能判断是否是当前导航，并加标记

下一篇：jQuery简单带淡出动画的下拉菜单