网站上常常会出现各种特效,这些特效好看是好看,不过真是折腾人哪!昨天写一个标签式页面切换的代码写得我十分纠结,也就是昨天,我才知道这种切换的专业名字叫做“滑动门切换”。下面就写写实现它的代码,以后就方便使用了。特殊的一般要改的地方我做了一些标记(用红色字体):
它的css代码是:
div,ul,li,h4 { margin:0; padding:0;font-size:12px; list-style:none}
#box {width:246px;border:1px #95CF92 solid;padding:1px;}
#box h4 {float:left;width:82px;height:30px;line-height:25px;text-align:center;font-size:12px;over-flow:hidden}
#box h4.menuNo {font-weight:normal;color:#333333;
background:url(http://img.lingd.net/attachments/date_201101/34d653d2cf6940d4ab71ff96419d0ca6.jpg) repeat-x}
#box h4.menuOn {font-weight:bold;color:#ffffff;
background:url(http://img.lingd.net/attachments/date_201101/abb21edb0e291996aa93e3f6245491a6.jpg) no-repeat}
#box .list_none {display:none}
#box .list {margin:0px;padding:5px;height:auto}
#box .list ul {margin:0px;padding:0px}
#box .list li {line-height:20px; clear:both}
#box .list li span {font-size:12px;font-weight:normal;color:#ffffff;padding-left:4px;padding-right:8px}
#box .list li.one { background:url(http://img.lingd.net/attachments/date_201105/f5f7e528a7425f74a0222e4ec781f94e.gif) no-repeat}
#box .list li.two {background:url(http://img.lingd.net/attachments/date_201105/3a5c77c25de8d7d91f12354d584fa9c1.gif) no-repeat}
#box .list li.thr {background:url(http://img.lingd.net/attachments/date_201105/0617d4acd95ae069f88331fa491aa776.gif) no-repeat}
对应源代码形式是:(蓝色内容可自行编辑)
<div id="box">
<script language="javascript">
function switchmodTag(modtag,modcontent,modk) {
for(i=1; i <4; i++) {
if (i==modk) {
document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="list";}
else {
document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="list_none";}
}
}
</script>
<h4 class="menuOn" id="mod1" οnmοuseοver="switchmodTag('mod','list','1');this.blur();">
最近更新</h4>
<h4 class="menuNo" id="mod2" οnmοuseοver="switchmodTag('mod','list','2');this.blur();">
近期推荐</h4>
<h4 class="menuNo" id="mod3" οnmοuseοver="switchmodTag('mod','list','3');this.blur();">
热门点击</h4>
<div class="list" id="list1">
<ul>
<li class="one"><span>1</span><a href="http://xu123.lingd.net/list-1207049-1.html">最近更新的信息</a></li>
<li class="one"><span>2</span><a href="#">最近更新的信息</a></li>
<li class="one"><span>3</span><a href="#">最近更新的信息</a></li>
<li class="one"><span>4</span><a href="#">最近更新的信息</a></li>
<li class="one"><span>5</span><a href="#">最近更新的信息</a></li>
<li class="one"><span>6</span><a href="#">最近更新的信息</a></li>
<li class="one"><span>7</span><a href="#">最近更新的信息</a></li>
<li class="one"><span>8</span><a href="#">最近更新的信息</a></li>
</ul>
</div>
<div class="list_none" id="list2">
<ul>
<li class="two"><span>1</span><a href="http://xu123.lingd.net/list-1209116-1.html">近期推荐的信息</a></li>
<li class="two"><span>2</span><a href="#">近期推荐的信息</a></li>
<li class="two"><span>3</span><a href="#">近期推荐的信息</a></li>
<li class="two"><span>4</span><a href="#">近期推荐的信息</a></li>
<li class="two"><span>5</span><a href="#">近期推荐的信息</a></li>
<li class="two"><span>6</span><a href="#">近期推荐的信息</a></li>
<li class="two"><span>7</span><a href="#">近期推荐的信息</a></li>
<li class="two"><span>8</span><a href="#">近期推荐的信息</a></li>
</ul>
</div>
<div class="list_none" id="list3">
<ul>
<li class="thr"><span>1</span><a href="http://xu123.lingd.net/list-2178959-1.html">热门点击的信息</a></li>
<li class="thr"><span>2</span><a href="#">热门点击的信息</a></li>
<li class="thr"><span>3</span><a href="#">热门点击的信息</a></li>
<li class="thr"><span>4</span><a href="#">热门点击的信息</a></li>
<li class="thr"><span>5</span><a href="#">热门点击的信息</a></li>
<li class="thr"><span>6</span><a href="#">热门点击的信息</a></li>
<li class="thr"><span>7</span><a href="#">热门点击的信息</a></li>
<li class="thr"><span>8</span><a href="#">热门点击的信息</a></li>
</ul>
</div>
</div>