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

{$MY_网站顶部} {$MY_频道栏目导航} {$MY_网站通栏广告} {$MY_频道导航}

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

网站导航文字按特殊的类型进行切换的特效
副标题：
作者：佚名文章来源：网页教学网站长整理点击数：更新时间：2008-1-3 22:35:39


用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.Gzwm.Net/files/071101/1_211958.gif); overflow:hidden; } #title { height:17px; height:16px; background:url(http://Www.Gzwm.Net/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.Gzwm.Net/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.Gzwm.Net/files/071101/1_212017.gif" alt="" /><img src="http://Www.Gzwm.Net/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(dMath.sin(Math.PI(j+1)/(2n)));},(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 全部选择提示：你可先修改部分代码，再按运行]
文章录入：布冰责任编辑：布冰

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。本站地址：Http://Www.Gzwm.Net
	上一篇文章：仿网易的滑动门导航效果代码(DIV+CSS) 下一篇文章：一个比较有用的特殊选项卡特效代码
【字体：小大】发表评论加入收藏告诉好友打印此文关闭窗口

	[组图]Photoshop创意打
	[组图]photoshop教程：
	[组图]photoshop调色教
	[组图]让你操作Windows
	《浴女》—CD网格实战大
	《浴女》—CD网格实战大
	用coreldraw绘制国画荷
	用Coreldraw设计家装彩

	Photoshop教程:冷色调M
	Dreamweaver制作网页13
	自己动手修改QQ等级
	QQ空间播放多首背景音乐
	QQ空间免费领养5级植物
	QQ鼠年新年贺词发给好
	能上QQ却打不开网页的原
	贵州数据提供100M永久免

用鼠标直接动态改
网页特效代码：模
网页中弹出小窗口
网页中弹出小窗口
关于限制网页表单

Photoshop创意打造奇

photoshop教程：酒久

photoshop调色教程：

让你操作Windows于弹

（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

{$MY_2006网页通用底部}