平面設(shè)計(jì)
環(huán)藝設(shè)計(jì)
工業(yè)設(shè)計(jì)
CG插畫
網(wǎng)頁UI
攝影
藝術(shù)
名人堂
空間設(shè)計(jì)
UI/UX
網(wǎng)頁設(shè)計(jì)
電商視覺
工業(yè)/產(chǎn)品
插畫動漫
文章
平面教程
網(wǎng)頁教程
多媒體教程
印前技術(shù)
PS教程
Illustrator教程
矢量素材
矢量標(biāo)志
PSD素材
PNG圖標(biāo)素材
GIF圖標(biāo)素材
其他素材
壁紙下載
PS素材
平面征集
工業(yè)征集
環(huán)境藝術(shù)
其它征集
設(shè)計(jì)揭曉
用CSS實(shí)現(xiàn)的文字導(dǎo)航上下切換,還有文本的左右切換,喜歡的話可以自己開發(fā)其它功能!
<!--[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="http://images.sj33.cn/uploads/allimg/200711/20071111105214827.gif" /><img src="http://images.sj33.cn/uploads/allimg/200711/20071111105214884.gif" /></P></P><P id="text"><ul id="c1"><li><a href="#">熱門搜索的內(nèi)容</a></li><li><a href="#">熱門搜索的內(nèi)容</a></li><li><a href="#">熱門搜索的內(nèi)容</a></li><li><a href="#">熱門搜索的內(nèi)容</a></li><li><a href="#">熱門搜索的內(nèi)容</a></li><li><a href="#">熱門搜索的內(nèi)容</a></li><li><a href="#">熱門搜索的內(nèi)容</a></li><li><a href="#">熱門搜索的內(nèi)容</a></li><li><a href="#">熱門搜索的內(nèi)容</a></li><li><a href="#">熱門搜索的內(nèi)容</a></li></ul><ul id="c2"><li><a href="#">熱門體育的內(nèi)容</a></li><li><a href="#">熱門體育的內(nèi)容</a></li><li><a href="#">熱門體育的內(nèi)容</a></li><li><a href="#">熱門體育的內(nèi)容</a></li><li><a href="#">熱門體育的內(nèi)容</a></li><li><a href="#">熱門體育的內(nèi)容</a></li><li><a href="#">熱門體育的內(nèi)容</a></li><li><a href="#">熱門體育的內(nèi)容</a></li><li><a href="#">熱門體育的內(nèi)容</a></li><li><a href="#">熱門體育的內(nèi)容</a></li></ul><ul id="c3"><li><a href="#">熱門娛樂的內(nèi)容</a></li><li><a href="#">熱門娛樂的內(nèi)容</a></li><li><a href="#">熱門娛樂的內(nèi)容</a></li><li><a href="#">熱門娛樂的內(nèi)容</a></li><li><a href="#">熱門娛樂的內(nèi)容</a></li><li><a href="#">熱門娛樂的內(nèi)容</a></li><li><a href="#">熱門娛樂的內(nèi)容</a></li><li><a href="#">熱門娛樂的內(nèi)容</a></li><li><a href="#">熱門娛樂的內(nèi)容</a></li><li><a href="#">熱門娛樂的內(nèi)容</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;//計(jì)算標(biāo)題的總長度var ele = document.getElementById("tit_l");var w = ele.clientWidth;var n = 18;var t = 40;//數(shù)值越小,速度越快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 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
優(yōu)秀海報(bào)設(shè)計(jì)精選集(8)海報(bào)設(shè)計(jì)
充滿自然光線!32平米精致小公寓設(shè)計(jì)裝修設(shè)計(jì)
親愛的圖書館 | VERSE雜志版式設(shè)計(jì)版式設(shè)計(jì)
網(wǎng)站導(dǎo)航文字左右切換的特效
自適應(yīng)寬度的TAB滑動門標(biāo)簽導(dǎo)航
CSS代碼:模擬制作techweb網(wǎng)站導(dǎo)航
關(guān)于我們 廣告投放 版權(quán)聲明 免責(zé)聲明網(wǎng)站地圖 友情鏈接 留言反饋
版權(quán)所有 2006-2021 設(shè)計(jì)之家(www.loupansousuo.com.cn)Copyright ? 2006-2021 www.loupansousuo.com.cn All rights reserved.