仿Yahoo(雅虎中国)侧栏列表切换效果
<!--仿yahoo中国侧边栏效果JS版--><h4>仿yahoo中国侧边栏效果JS版</h4><style>
* {
margin:0;padding:0;font-size:12px;
}img {border:none;}ul,ol {list-style:none;}#content {margin:20px auto;border:1px solid #a5b5c0;width:170px;height:241px;background:url(/upload/remotupload/2007122285142478.gif);overflow:hidden;}#title {height:17px;*height:16px;background:url(/upload/remotupload/2007122285143646.gif) repeat-x;border-bottom:1px solid #a5b5c0;padding:3px 0 0 6px;*padding:4px 0 0 6px;font-weight:700;}#title li {float:left;display:inline;width:92px;}#tit_l {float:left;width:92px;overflow:hidden;height:14px;}#tit_r {float:right;margin-top:-1px;*margin-top:-2px;}#tit_r img {margin-right:4px;cursor:pointer;}#tit_r img:hover {filter: Alpha(Opacity=70);-moz-opacity: 0.7;opacity: 0.7;}#text {clear:both;height:210px;}#text ul {background:url(/upload/remotupload/2007122285143553.gif) no-repeat 12px 4px;margin:6px 0;}#text li {padding-left:34px;line-height:21px;}#text li a {color:#123b8d;text-decoration:none;}#text li a:hover {text-decoration:underline;}</style></head><body><div id="content"><div id="title"><div id="tit_l"><div id="mytit"><ul><li>热门搜索</li><li>热门体育</li><li>热门娱乐</li></ul></div></div><div id="tit_r"><img src="/upload/remotupload/2007122285143273.gif" alt="" /><img src="/upload/remotupload/2007122285143901.gif" alt="" /></div></div><div id="text"><ul id="c1"><li><a href="#">热门搜索的内容</a></li><li><a href="#">热门搜索的内容</a></li><li><a href="#">热门搜索的内容</a></li><li><a href="#">热门搜索的内容</a></li><li><a href="#">热门搜索的内容</a></li><li><a href="#">热门搜索的内容</a></li><li><a href="#">热门搜索的内容</a></li><li><a href="#">热门搜索的内容</a></li><li><a href="#">热门搜索的内容</a></li><li><a href="#">热门搜索的内容</a></li></ul><ul id="c2"><li><a href="#">热门体育的内容</a></li><li><a href="#">热门体育的内容</a></li><li><a href="#">热门体育的内容</a></li><li><a href="#">热门体育的内容</a></li><li><a href="#">热门体育的内容</a></li><li><a href="#">热门体育的内容</a></li><li><a href="#">热门体育的内容</a></li><li><a href="#">热门体育的内容</a></li><li><a href="#">热门体育的内容</a></li><li><a href="#">热门体育的内容</a></li></ul><ul id="c3"><li><a href="#">热门娱乐的内容</a></li><li><a href="#">热门娱乐的内容</a></li><li><a href="#">热门娱乐的内容</a></li><li><a href="#">热门娱乐的内容</a></li><li><a href="#">热门娱乐的内容</a></li><li><a href="#">热门娱乐的内容</a></li><li><a href="#">热门娱乐的内容</a></li><li><a href="#">热门娱乐的内容</a></li><li><a href="#">热门娱乐的内容</a></li><li><a href="#">热门娱乐的内容</a></li></ul></div></div><script type="text/javascript">/***File Name:yahooo.js*Author:wuleying*Date:2007/10/26**/var myTitle = document.getElementById("mytit");myTitle.innerHTML += myTitle.innerHTML;var lists = myTitle.getElementsByTagName("li");var num = lists.length - 2;//alert(num)myTitle.style.width = (num+1) * 92;//计算标题的总长度var ele = document.getElementById("tit_l");var w = ele.clientWidth;var n = 18;var t = 40;//数值越小，速度越快var times = new Array(n);var k = 0;var l = 0;yahooo(0);function yahooo(s){if(k >= num && s > 0)
{
ele.scrollLeft = w;k = 1;
}if(k < 1 && s < 0){ele.scrollLeft = (num-1) * w;k = num-1;}k += s;var x = ele.scrollLeft;var d = k * w - x;for(i=0;i<n;i++)(function(){if(times[i]) {clearTimeout(times[i])} ;var j = i;times[i] = setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);})();}var imgs = document.getElementById("tit_r").getElementsByTagName("img");var c1 = document.getElementById("c1");var c2 = document.getElementById("c2");var c3 = document.getElementById("c3");imgs[0].onclick = function(){yahooo(-1);if(k==0){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";}if(k==1){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";}if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";}}imgs[1].onclick = function(){yahooo(1);if(k==0 || k==3){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";}if(k==1 || k==4){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";}if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";}}</script></body></html>