点击此处直接下载该效果的所有文件：下载该特效所有文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://meihuand.cn"> <head> <meta http-equiv="Content-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="robots" content="all" /> <meta name="author" content="梅花┊meihuand.cn" /> <meta name="Copyright" content="copyright (c) 2008 www.meihuand.cn" /> <title>仿网页特效观止首页栏目切换滑动门效果 --网页特效代码| meihuand.CN|</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> body { font-size:12px } /* 当前模块的总宽度为250px，不合适的自己调整吧，另外改变相关图片的路径的话注意修改css样式代码的图片路径 */ #slidingBlock { width:246px;border:1px #95CF92 solid;padding:1px;over-flow:hidden } #slidingBlock h4 { float:left;width:82px;height:30px;line-height:25px;text-align:center;font-size:12px;over-flow:hidden } #slidingBlock h4.menuNo { font-weight:normal;color:#333333;background:url(images/slidingMenuLine.gif) repeat-x } #slidingBlock h4.menuOn { font-weight:bold;color:#ffffff;background:url(images/slidingMenu.gif) no-repeat } #slidingBlock DIV.slidingList_none { display:none } #slidingBlock DIV.slidingList { margin:0px;padding:5px;height:150px } #slidingBlock DIV.slidingList ul { margin:0px;padding:0px } #slidingBlock DIV.slidingList li { height:20px;line-height:20px } #slidingBlock DIV.slidingList li span { font-size:12px;font-weight:normal;color:#ffffff;padding-left:4px;padding-right:8px } #slidingBlock DIV.slidingList li.one { background:url(images/slidingTag1.gif) no-repeat } #slidingBlock DIV.slidingList li.two { background:url(images/slidingTag2.gif) no-repeat } #slidingBlock DIV.slidingList li.thr { background:url(images/slidingTag3.gif) no-repeat } </style> </head> <body> <div id="slidingBlock"> <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="slidingList";} else { document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="slidingList_none";} } } </script> <h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1');this.blur();"> 最近更新</h4> <h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();"> 近期推荐</h4> <h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3');this.blur();"> 热门点击</h4> <div class="slidingList" id="slidingList1"> <ul> <li class="one"><span>1</span><a href="http://www.meihuand.cn">第一个的信息第一个的信息</a></li> <li class="one"><span>2</span><a href="http://www.meihuand.cn">第一个的信息第一个的信息</a></li> <li class="one"><span>3</span><a href="http://www.meihuand.cn">第一个的信息第一个的信息信息信息</a></li> <li class="one"><span>4</span><a href="http://www.meihuand.cn">第一个的信息第一个的信息</a></li> <li class="one"><span>5</span><a href="http://www.meihuand.cn">第一个的信息第一个的信息</a></li> </ul> </div> <div class="slidingList_none" id="slidingList2"> <ul> <li class="two"><span>1</span><a href="http://www.meihuand.cn">第二个的信息第二个的信息</a></li> <li class="two"><span>2</span><a href="http://www.meihuand.cn">第二个的信息第二个的信息</a></li> <li class="two"><span>3</span><a href="http://www.meihuand.cn">第二个的信息第二个的信息信息信息</a></li> <li class="two"><span>4</span><a href="http://www.meihuand.cn">第二个的信息第二个的信息</a></li> <li class="two"><span>5</span><a href="http://www.meihuand.cn">第二个的信息第二个的信息</a></li> <li class="two"><span>6</span><a href="http://www.meihuand.cn">第二个的信息第二个的信息</a></li> <li class="two"><span>7</span><a href="http://www.meihuand.cn">第二个的信息第二个的信息</a></li> </ul> </div> <div class="slidingList_none" id="slidingList3"> <ul> <li class="thr"><span>1</span><a href="http://www.meihuand.cn">第三个的信息第三个的信息</a></li> <li class="thr"><span>2</span><a href="http://www.meihuand.cn">第三个的信息第三个的信息</a></li> <li class="thr"><span>3</span><a href="http://www.meihuand.cn">第三个的信息第三个的信息信息信息</a></li> <li class="thr"><span>4</span><a href="http://www.meihuand.cn">第三个的信息第三个的信息</a></li> <li class="thr"><span>5</span><a href="http://www.meihuand.cn">第三个的信息第三个的信息</a></li> </ul> </div> </div> <p> </p> <p> </p> <p> </p> <p>说明：如果需要点击切换的话，将onmouseover改成onclick即可，当前模块的总宽度为250px，不合适的自己调整吧，另外改变相关图片的路径的话注意修改css样式代码的图片路径</p> <p>更多网页特效代码尽在 <a href="http://www.meihuand.cn/Index.html">梅花弄笛</a></p> </body> </html>
