CSS+JSS滚动切换的选项卡【荐】

2024-09-05 12:19:48

字体：大中小

来源：转载

供稿：网友

用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" 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 id=content><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="/d/file/p/2024/09-05/a9a79f8c7325e5ae54076b2d8f55a9d4.gif"><IMG alt="" src="/d/file/p/2024/09-05/254f59bb332be3f2037963100d58909c.gif"></DIV></DIV><DIV id=text><UL id=c1><li>VC++实现超酷QQ界面</li><li>基于C#同步套接字</li><li>《网页制作完全手册》 chm</li><li>VB调用模板进行打印的实例</li><li>ASP.net报表设计源码包</li><li>J2me开发环境的搭建教程</li><li>《jQuery in Action》 源代码</li><li>DCS PHP在线记账/记事本</li><li>VB打印控件Listview示例</li><li>仿支付宝CSS网站导航栏</li></UL><UL id=c2> <li>BICQ 仿QQ聊天系统</li><li>DIV+JS弹出窗口框架</li><li>WindowLite  可拖动提示窗口</li><li>Asp生成静态完整实例</li><li>VC++固定资产管理系统</li><li>jQuery相册播放插件</li><li>Ajax拖动分页插件</li><li>C#餐饮管理系统</li> <li>BICQ 仿QQ聊天系统</li> <li>BICQ 仿QQ聊天系统</li></UL><UL id=c3><li>VC++实现超酷QQ界面</li><li>基于C#同步套接字</li><li>《网页制作完全手册》 chm</li><li>VB调用模板进行打印的实例</li><li>ASP.net报表设计源码包</li><li>J2me开发环境的搭建教程</li><li>《jQuery in Action》 源代码</li><li>DCS PHP在线记账/记事本</li><li>VB打印控件Listview示例</li><li>仿支付宝CSS网站导航栏</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>

上一篇：Blog里面的简洁CSS菜单

下一篇：又一竖向简洁Tab网页选项卡