网站导航文字左右切换的特效

用CSS实现的文字导航上下切换，还有文本的左右切换，喜欢的话可以自己开发其它功能！

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author" content="sj33" /><title>yahoo</title><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:158px;height:241px;background:url(//images.sj33.cn/uploads/allimg/200711/20071111105213563.gif);overflow:hidden;}#title {height:17px;*height:16px;background:url(//images.sj33.cn/uploads/allimg/200711/20071111105214167.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(//images.sj33.cn/uploads/allimg/200711/20071111105214306.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><P id="content"><P id="title"><P id="tit_l"><P id="mytit"><ul><li>热门搜索</li><li>热门体育</li><li>热门娱乐</li></ul></P></P><P id="tit_r"><img src="//images.sj33.cn/uploads/allimg/200711/20071111105214827.gif" alt="" /><img src="//images.sj33.cn/uploads/allimg/200711/20071111105214884.gif" alt="" /></P></P><P 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></P></P><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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

网站导航文字左右切换的特效

猜你感兴趣

最新文章