php 滑动门切换代码示例

对PHP滑动门切换代码感兴趣的小伙伴，下面一起跟随编程之家 jb51.cc的小编两巴掌来看看吧！
触显JS代码
以下部分加在index.htm中的  后 JS代码如下：


<SCRIPT language=javascript>
function show_intro(pre,pree,n,select_n,css) {
for (i = 1; i <= n; i++) {
var intro = document.getElementById(pre + i);
var cha = document.getElementById(pree + i);
intro.style.display = none;
cha.className=css + _off;
if (i == select_n)
{
intro.style.display = block;
cha.className=css + _on;
}
}
}
</SCRIPT>

触显CSS代码以下部分加在css.css中图片大小：62×28 代码如下：


.hot_off {
BACKGROUND: url(ty1.gif) no-repeat; width:62px;
height:18px; padding-top:10px;
}
.hot_on { BACKGROUND: url(ty2.gif) no-repeat;
width:62px; height:18px; padding-top:10px;
 }

页面代码，以下部分加在index.htm中代码如下：


<table width=100% border=0 cellspacing=0 cellpadding=0 class=dragTable> <tr> <td class=head> <h3 class=L></h3> <div class=hot_on id=tzm1 onm ouSEOver=show_intro('ytld','tzm',4,1,'hot') style=float:left;> <a href=/list.PHP?fid=31>工作动态</a></div> <div class=hot_off id=tzm2 onm ouSEOver=show_intro('ytld',2,'hot') style=float:left;margin-left:6px;> <a href=/list.PHP?fid=27>盐亭新闻</a></div> <div class=hot_off id=tzm3 onm ouSEOver=show_intro('ytld',3,'hot') style=float:left;margin-left:6px;> <a href=/list.PHP?fid=55>综合新闻</a></div> <div class=hot_off id=tzm4 onm ouSEOver=show_intro('ytld','hot') style=float:left;margin-left:6px;> <a href=/list.PHP?fid=102>热点新闻</a></div> <h3 class=R></h3> </tr> <tr> <td colspan=3 class=middle> <div id=ytld1 align=left>$label[a002]</div> <div id=ytld2 align=left style=disPLAY: none>$label[a003]</div> <div id=ytld3 align=left style=disPLAY: none>$label[a004]</div> <div id=ytld4 align=left style=disPLAY: none>$label[a001]</div> </td> </tr> <tr> <td colspan=3 class=foot> <h3 class=L></h3> <h3 class=R></h3></td> </tr> </table>

此代码可以在一个网页中设置多个触显。设置方法：只需要重新命名页面代码中的“ytld”、“tzm”和“4，1”（名称自己定）。

如：要设一个五显触显：只需将“ytld”、“tzm”重新命名，并将“4，1”“4，2”“4，3”“4，4”，改为“5,1”“5,2”“5,3”“5,4”“5.5”，就可以了。

注意其中的“tzm1”“ytld1”也要做相应改变。

滑动门

php 滑动门切换代码示例

相关文章