网站导航文字按特殊的类型进行切换的特效
- 2022-01-31
- 来源/作者： onegreen.org / 佚名
- 5 次浏览
用CSS实现的文字导航上下切换，还有文本的左右切换，喜欢的话可以自己开发其它功能！
|
以下是代码片段： <!--[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="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.syku.net/web/UploadFiles_5065/200711/20071108105122503.gif); overflow:hidden; } #title { height:17px; *height:16px; background:url(http://www.syku.net/web/UploadFiles_5065/200711/20071108105123415.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.syku.net/web/UploadFiles_5065/200711/20071108105123370.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.syku.net/web/UploadFiles_5065/200711/20071108105123939.gif" alt="" /><img src="http://www.syku.net/web/UploadFiles_5065/200711/20071108105124376.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> |
