CSS+JSS滾動切換的選項卡【薦】_菜單導航特效

用CSS制作會轉動的選項卡，感覺比較不錯，本人很喜歡，運用CSS+JavaScript技術結合，帶動畫效果的切換，新奇美觀，推薦給大家。留意標題的長度，假如太長的話會變成二行，不過用CSS可以隱躲掉，這個題目留給你解決吧。

<!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>
<title>可以滾動切換的選項卡</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<STYLE> 
* { 
margin:0; 
padding:0; 
font-size:12px; 
} 
img { 
border:none; 
} 
ul,ol { 
list-style:none; 
} 
#mrc { 
margin:20px auto; 
border:1px solid #a5b5c0; 
width:188px; 
height:241px; 
background:url(http://p1.mb5u.com/texiao/dot.gif); 
overflow:hidden; 
} 
#title { 
height:17px; 
*height:16px; 
background:url(http://p1.mb5u.com/texiao/dotline.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(http://p1.mb5u.com/texiao/dotcount.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=mrc>
<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 alt="" src="http://p1.mb5u.com/texiao/dotleft.gif"><IMG alt="" src="http://p1.mb5u.com/texiao/dotright.gif"></DIV></DIV>
<DIV id=text>
<UL id=c1>
<li><a href="/soft/1160.shtml" target="_blank">VC++實現超酷QQ界面</a></li><li><a href="/soft/3477.shtml" target="_blank">基于C#同步套接字</a></li><li><a href="/soft/4067.shtml" target="_blank">《網頁制作完全手冊》 chm</a></li><li><a href="/soft/2144.shtml" target="_blank">VB調用模板進行打印的實例</a></li><li><a href="/soft/1183.shtml" target="_blank">ASP.net報表設計源碼包</a></li><li><a href="/soft/1610.shtml" target="_blank">J2me開發環境的搭建教程</a></li><li><a href="/soft/3182.shtml" target="_blank">《jQuery in Action》 源代碼</a></li><li><a href="/soft/3307.shtml" target="_blank">DCS PHP在線記賬/記事本</a></li><li><a href="/soft/2832.shtml" target="_blank">VB打印控件Listview示例</a></li><li><a href="/soft/4321.shtml" target="_blank">仿支付寶CSS網站導航欄</a></li>
</UL>
<UL id=c2>
 <li><a href="/soft/4387.shtml" target="_blank">BICQ 仿QQ聊天系統</a></li>
<li><a href="/soft/3389.shtml" target="_blank">DIV+JS彈出窗口框架</a></li>
<li><a href="/soft/4383.shtml" target="_blank">WindowLite  可拖動提示窗口</a></li>
<li><a href="/soft/4381.shtml" target="_blank">Asp生成靜態完整實例</a></li>
<li><a href="/soft/4380.shtml" target="_blank">VC++固定資產管理系統</a></li>
<li><a href="/soft/4376.shtml" target="_blank">jQuery相冊播放插件</a></li>
<li><a href="/soft/4374.shtml" target="_blank">Ajax拖動分頁插件</a></li>
<li><a href="/soft/4373.shtml" target="_blank">C#餐飲管理系統</a></li>
 <li><a href="/soft/4387.shtml" target="_blank">BICQ 仿QQ聊天系統</a></li>
 <li><a href="/soft/4387.shtml" target="_blank">BICQ 仿QQ聊天系統</a></li>
</UL>
<UL id=c3>
<li><a href="/soft/1160.shtml" target="_blank">VC++實現超酷QQ界面</a></li><li><a href="/soft/3477.shtml" target="_blank">基于C#同步套接字</a></li><li><a href="/soft/4067.shtml" target="_blank">《網頁制作完全手冊》 chm</a></li><li><a href="/soft/2144.shtml" target="_blank">VB調用模板進行打印的實例</a></li><li><a href="/soft/1183.shtml" target="_blank">ASP.net報表設計源碼包</a></li><li><a href="/soft/1610.shtml" target="_blank">J2me開發環境的搭建教程</a></li><li><a href="/soft/3182.shtml" target="_blank">《jQuery in Action》 源代碼</a></li><li><a href="/soft/3307.shtml" target="_blank">DCS PHP在線記賬/記事本</a></li><li><a href="/soft/2832.shtml" target="_blank">VB打印控件Listview示例</a></li><li><a href="/soft/4321.shtml" target="_blank">仿支付寶CSS網站導航欄</a></li>
</UL></DIV></DIV>
<SCRIPT type=text/javascript> 
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 = 38;//數值越小速度越快 
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>

所屬頻道：菜單導航特效/更新時間：2011-02-24

[收藏][報錯][返回列表]

相關菜單導航特效：

CSS+JSS滾動切換的選項卡【薦】_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些