CSS+JSS滾動(dòng)切換的選項(xiàng)卡【薦】

2024-09-05 12:19:47

字體：大中小

供稿：網(wǎng)友

用CSS制作會(huì)滾動(dòng)的選項(xiàng)卡，感覺比較不錯(cuò)，本人很喜歡，運(yùn)用CSS+JavaScript技術(shù)結(jié)合，帶動(dòng)畫效果的切換，新穎美觀，推薦給大家。注意標(biāo)題的長度，如果太長的話會(huì)變成二行，不過用CSS可以隱藏掉，這個(gè)問題留給你解決吧。

<!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>可以滾動(dòng)切換的選項(xiàng)卡</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><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:188px; height:241px; background:url(/jscss/demoimg/200905/dot.gif); overflow:hidden; } #title { height:17px; *height:16px; background:url(/jscss/demoimg/200905/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(/jscss/demoimg/200905/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   class="iwvjtn8m0"   id=content><div   class="iwvjtn8m0"   id=title><div   class="iwvjtn8m0"   id=tit_l><div   class="iwvjtn8m0"   id=mytit><UL><LI>最新更新 </LI><LI>下載排行 </LI><LI>最受關(guān)注 </LI></UL></DIV></DIV><div   class="iwvjtn8m0"   id=tit_r><IMG alt="" src="/d/file/p/2024/09-05/aa91f2c753cbe0278f0460c45fb65335.gif"><IMG alt="" src="/d/file/p/2024/09-05/ac224d04a5efa33d8cc073f8a43218a5.gif"></DIV></DIV><div   class="iwvjtn8m0"   id=text><UL id=c1><li>VC++實(shí)現(xiàn)超酷QQ界面</li><li>基于C#同步套接字</li><li>《網(wǎng)頁制作完全手冊》 chm</li><li>VB調(diào)用模板進(jìn)行打印的實(shí)例</li><li>ASP.net報(bào)表設(shè)計(jì)源碼包</li><li>J2me開發(fā)環(huán)境的搭建教程</li><li>《jQuery in Action》 源代碼</li><li>DCS PHP在線記賬/記事本</li><li>VB打印控件Listview示例</li><li>仿支付寶CSS網(wǎng)站導(dǎo)航欄</li></UL><UL id=c2> <li>BICQ 仿QQ聊天系統(tǒng)</li><li>DIV+JS彈出窗口框架</li><li>WindowLite  可拖動(dòng)提示窗口</li><li>Asp生成靜態(tài)完整實(shí)例</li><li>VC++固定資產(chǎn)管理系統(tǒng)</li><li>jQuery相冊播放插件</li><li>Ajax拖動(dòng)分頁插件</li><li>C#餐飲管理系統(tǒng)</li> <li>BICQ 仿QQ聊天系統(tǒng)</li> <li>BICQ 仿QQ聊天系統(tǒng)</li></UL><UL id=c3><li>VC++實(shí)現(xiàn)超酷QQ界面</li><li>基于C#同步套接字</li><li>《網(wǎng)頁制作完全手冊》 chm</li><li>VB調(diào)用模板進(jìn)行打印的實(shí)例</li><li>ASP.net報(bào)表設(shè)計(jì)源碼包</li><li>J2me開發(fā)環(huán)境的搭建教程</li><li>《jQuery in Action》 源代碼</li><li>DCS PHP在線記賬/記事本</li><li>VB打印控件Listview示例</li><li>仿支付寶CSS網(wǎng)站導(dǎo)航欄</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;//計(jì)算標(biāo)題長度 var ele = document.getElementById("tit_l"); var w = ele.clientWidth; var n = 18; var t = 38;//數(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>

上一篇：清新精致的純CSS導(dǎo)航菜單

下一篇：隱藏在左側(cè)，鼠標(biāo)點(diǎn)擊展開CSS菜單