以前回複過幾個朋友,關於滑動門的代碼,那時我還沒有用上IE7,FF,結果,發現只能在IE6下運行,代碼也很長;今天又有朋友問我這個,我只好花一點時間,終於把這個東東完成了,希望大家喜歡;
相容IE7;FF;IE6
代碼更簡潔,更易讀;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滑動門</title> <style media="screen" type="text/css"> <!-- *{font-size:12px;} html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;} UL{list-style-type:none; margin:0px;} /* 標準盒模型 */ .ttl{height:18px;} .ctt{height:auto;padding:6px;clear:both} .w936{width:936px;margin:2px 0;clear:both;border:1px solid skyblue} /* TAB 轉場效果 */ .tb_{background-color: #E6F2FF; background-image: url('http://www.dc18.com/images/barbg_tab.gif'); background-repeat: repeat-x;} .tb_ ul{height:24px;} .tb_ li{float:left;height: 24px;padding-top: 6px;width: 94px;cursor:pointer;} .normaltab { background-image:url('http://www.dc18.com/images/normal_tab.gif'); background-repeat: no-repeat; color:#1F3A87 ;} .hovertab { background-image: url('http://www.dc18.com/images/hover_tab.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold } .dis{display:block;} .undis{display:none;} --> </style> </head> <body> <ul> <li id="tb_1" class="hovertab" onmouseover="xgz:HoverLi(1);">網上房展會</li> <li id="tb_2" class="normaltab" onmouseover="xgz:HoverLi(2);">本月開盤</li> <li id="tb_3" class="normaltab" onmouseover="xgz:HoverLi(3);">知名開發商</li> <li id="tb_4" class="normaltab" onmouseover="xgz:HoverLi(4);">欄目導航</li> <li id="tb_5" class="normaltab" onmouseover="xgz:HoverLi(5);">哈哈哈哈</li> <li id="tb_6" class="normaltab" onmouseover="xgz:HoverLi(6);">Q小鴿子</li> </ul> 內容1 內容2 內容3 內容4 內容5 內容6 [Q小鴿子] <hr author="http://xiaogezi.cn" style="color:red;" /> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
