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

 首页 > 网页特效 > 菜单特效 > CSS+JavaScript仿阿里巴巴字母轮换
CSS+JavaScript仿阿里巴巴字母轮换

 2018-07-10  360  收藏  0 赞一个  0 真差劲  0 去评论
<!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>
</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>

<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 


</body>
</html>
运行代码 全选代码 复制代码 清除代码 恢复代码
预览图片
这是仿阿里巴巴字母轮换的效果，以前有一款TAB滑动门和这个极其相信，那款来自淘宝。这个字母轮换其实就是一个比较大的滑动门，至少来说原理是一样的，希望大家好好研究一下。
一、推荐使用迅雷或快车等多线程下载软件下载本站资源。
二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。
三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！
四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.
五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。
六、如需转载本站资源，请注明转载来自并附带链接
七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com
 大家评论
 站长推荐
 点击排行