亚洲卡一卡二卡三新区乱码,影音先锋每日av色资源站,久久免费99精品国产自在现线

網站導航文字左右切換的特效

導航菜單
07年11月11日
編輯

sj33cn

用CSS實現的文字導航上下切換，還有文本的左右切換，喜歡的話可以自己開發其它功能！ !--

用CSS實現的文字導航上下切換，還有文本的左右切換，喜歡的話可以自己開發其它功能！

<!–[if IE]><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><![endif]–><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 全部選擇提示：你可先修改部分代碼，再按運行]

{{userData.name}}已認證

網站導航文字左右切換的特效

自適應寬度的TAB滑動門標簽導航

Grey Seagull插畫作品

客廳裝修效果圖欣賞

臥室裝修效果圖欣賞

衛生間裝修效果圖欣賞