相关文章
网站制作深入理解css中的position定位和z-index属性
北京网站设计第九节 与Fireworks的集成
北京网页设计在状态栏中实现活动文字效果
北京网页设计用Flash制作Google搜索程序
北京网站设计FLASH MX 2004视频教程: 太空站记四
北京网站设计FLASH MX 2004视频教程:《电脑报》片头制作（一）
企通互联在DreamweaverCS3中用Spry将XML数据显示到HTML页
网页设计纯CSS制作的新闻网站中的文章列表
北京网站制作如何将XHTML+CSS页面转换为打印机页面
网页设计初学者很好的参考：HTML标签详尽讲解
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 北京网站制作网站建设最简单的栏目切换方法（样式系列之栏目切换篇2）
北京网站制作网站建设最简单的栏目切换方法（样式系列之栏目切换篇2）
最近有网友反映，本人整理提供的凤凰和网易栏目切换效果太麻烦，想要一个简单点的，容易实现的，所以仿照PP 北京网站制作娱乐网的效果http://www.ppyule.com/整理了一下，用简单的代码就可以轻松实现栏目切换效果，而且更加容易自由布局，本例分别提供了调用六个栏目和三个栏目的两种效果。
最前面的两个栏目我用table做的样式测试，完全可以的！ 网站建设北京网页设计
北京网站建设
此主题相关图片如下：北京网站制作
网站制作
下面的就是原来的效果！网站建设
北京网页设计北京网站设计此主题相关图片如下：北京网站设计
网站设计
以下是调用三个栏目的！网站制作
企通互联此主题相关图片如下：北京网页设计
北京网站设计
网站制作此主题相关图片如下：网站制作www.qt-net.com src="http://edu.admin5.com/upimg/allimg/070319/1605287.jpg" onload=imgresize(this); border=0>企通互联
企通互联北京网页设计
这里特殊说明的是，标签部分可以用表格来实现的，想怎么调用就怎么调用，只要先行做好样式，可以图文混排，可以是新闻列表，可以是导读，你完全不用受本例效果限制，真的可以说是“为所欲为”了。样式的例子我也在样式系列中发了一些参考的，那些完全可以改成你自己要的。
这里做了一个简单的列表样式，就是新闻居左，日期右对齐的那种：
参考样式：<TR><TD width="15" vAlign="middle">·</TD> <TD width="165" vAlign="top" align="left"><A class=hei12 href="{NS:FS_NewsURL}" target=_blank>{NS:FS_NewsTitle}</A></TD> <TD width="65" vAlign="top" align="right">07-01-13 22:48:58</TD> </TR>北京网站建设
你再看看代码和插入标签后的效果是多么的简单：
代码及混合后位置：
<LINK 北京网页设计
href="test2/play.css" type=text/css 北京网页设计
rel=stylesheet>
北京网站建设网站制作
<SCRIPT>北京网站建设
var SwapID=0;北京网站建设
var PauseTime=15*1000;网站建设
var Timer1;网站制作
function swap(Obj)网页设计
{北京网站制作
var st = document.getElementsByName('lt2');网站制作
var j;网站建设
if(st.length>0)北京网站制作
{北京网站制作
for(j=0; j<st.length; j++)网站制作
{北京网站制作
if(st[j]==Obj)网站制作
{企通互联
lt2[j].style.display='';北京网页设计
//mt[j].style.background='url(images/lb1.gif)';#C8D5DD;北京网站设计
//mt[j].style.background='#F2F7FD';网站制作
mt[j].style.background='#ADC1DA'企通互联
mt[j].style.color='#FFFFFF'北京网页设计
} 网站建设
else 北京网站建设
{北京网站制作
lt2[j].style.display='none';北京网站设计
mt[j].style.background='#FFFFFF';网站设计
mt[j].style.color='#333333'北京网站建设
}网站建设
}北京网站设计
}网站建设
}
function AutoSwap() 网站建设
{北京网站设计
//StopSwap();Swap(lt[SwapID])网站设计
for (i=0;i<3;i++)企通互联
Swap(lt[i]);企通互联
//SwapID+=1;网站建设
//if (SwapID==3) { SwapID=1; }网站建设
Timer1=setTimeout("AutoSwap()",PauseTime);北京网页设计
}网站设计
企通互联
function StopSwap() 网页设计
{北京网站制作
clearTimeout(Timer1);北京网站建设
}网站建设
</SCRIPT>
北京网站设计
<META content="MSHTML 6.00.3790.2759" name=GENERATOR></HEAD>北京网站建设
<BODY>
网页设计
<DIV id=all>
<DIV id=ppyule></DIV>网站建设
<!--子菜单-->
<!--正文开始,相关内容-->北京网站设计
<DIV id=ppyule>北京网站设计
<DIV id=left_top>网站制作
<DIV id=xiangguan>网站设计
<DIV 企通互联
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px"><SPAN 网站建设
id=mt onmouseover=swap(lt2[0]); 北京网页设计
style="BACKGROUND: #adc1da; COLOR: #ffffff">相关内容</SPAN><SPAN id=mt 网站设计
onmouseover=swap(lt2[1]);>本类更新</SPAN><SPAN id=mt 网页设计
onmouseover=swap(lt2[2]);>本类排行</SPAN></DIV><!--相关内容-->北京网站设计
<DIV id=lt2>北京网页设计
风讯标签1</DIV><!--最近更新-->北京网页设计 网页设计
<DIV id=lt2 style="DISPLAY: none">企通互联
网站制作风讯标签2</DIV><!--本类排行-->网站建设
<DIV id=lt2 style="DISPLAY: none">网站设计
风讯标签3</DIV></DIV>北京网页设计
</DIV>北京网站设计
</DIV>
</DIV>网站建设
<!--end all--></BODY></HTML>网站建设