网站导航文字按特殊的类型进行切换的特效

http://www.gaoqian.com/ 2007-11-01 21:18:19 来源:网页教学网站长整理

用CSS实现的文字导航上下切换，还有文本的左右切换，喜欢的话可以自己开发其它功能！

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="wuelying" /> <title>yahooo</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(http://www.gaoqian.com/files/071101/1_211958.gif); overflow:hidden; } #title { height:17px; *height:16px; background:url(http://www.gaoqian.com/files/071101/1_211943.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://www.gaoqian.com/files/071101/1_212047.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 src="http://www.gaoqian.com/files/071101/1_212017.gif" alt="" /><img src="http://www.gaoqian.com/files/071101/1_212034.gif" alt="" /></div> </div> <div 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> </div> </div> <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 全部选择提示：你可先修改部分代码，再按运行]

复制链接发给好友收藏本文关闭此页

上一篇：多行文本滚动切换的网页文字特效

下一篇：网站内容管理系统CMS在国内都有哪些？

网站导航文字按特殊的类型进行切换的特效

相关文章

阅读排行

专题教程

推荐文章

最新更新