注册 登录
编程论坛 → ASP技术论坛

网页中栏目切换滑动门效果问题

pstaxcgh 发布于 2010-08-11 16:28， 883 次点击
在网上找了一个滑动门效果源码，效果见下链接http://www.。只用一个的时候还正常，如果我把它复制到同一网页的其它地方就不能用了，望高手解决一下。以下是完整源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿网易首页栏目切换滑动门效果 - 分享
<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.第一个的信息第一个的信息</a></li>
      <li class="one"><span>2</span><a href="http://www.第一个的信息第一个的信息</a></li>
      <li class="one"><span>3</span><a href="http://www.第一个的信息第一个的信息信息信息</a></li>
      <li class="one"><span>4</span><a href="http://www.第一个的信息第一个的信息</a></li>
      <li class="one"><span>5</span><a href="http://www.第一个的信息第一个的信息</a></li>
    </ul>
  </div>
  <div class="slidingList_none" id="slidingList2">
    <ul>
      <li class="two"><span>1</span><a href="http://www.第二个的信息第二个的信息</a></li>
      <li class="two"><span>2</span><a href="http://www.第二个的信息第二个的信息</a></li>
      <li class="two"><span>3</span><a href="http://www.第二个的信息第二个的信息信息信息</a></li>
      <li class="two"><span>4</span><a href="http://www.第二个的信息第二个的信息</a></li>
      <li class="two"><span>5</span><a href="http://www.第二个的信息第二个的信息</a></li>
      <li class="two"><span>6</span><a href="http://www.第二个的信息第二个的信息</a></li>
      <li class="two"><span>7</span><a href="http://www.第二个的信息第二个的信息</a></li>
    </ul>
  </div>
  <div class="slidingList_none" id="slidingList3">
    <ul>
      <li class="thr"><span>1</span><a href="http://www.第三个的信息第三个的信息</a></li>
      <li class="thr"><span>2</span><a href="http://www.第三个的信息第三个的信息</a></li>
      <li class="thr"><span>3</span><a href="http://www.第三个的信息第三个的信息信息信息</a></li>
      <li class="thr"><span>4</span><a href="http://www.第三个的信息第三个的信息</a></li>
      <li class="thr"><span>5</span><a href="http://www.第三个的信息第三个的信息</a></li>
    </ul>
  </div>
</div>
<p>　</p>
<p>　</p>
<p>　</p>
<p>说明：如果需要点击切换的话，将onmouseover改成onclick即可，当前模块的总宽度为250px，不合适的自己调整吧，另外改变相关图片的路径的话注意修改css样式代码的图片路径</p>


<br><br>
<div align="center">

<br><br>
获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.
</div>
</body>
</html>
2 回复
#2
yms1232010-08-11 18:22
程序代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.">
<html xmlns="http://www.">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿网易首页栏目切换滑动门效果 - 分享 type="text/css">
body {
    font-size:12px
}
/* 当前模块的总宽度为250px，不合适的自己调整吧，另外改变相关图片的路径的话注意修改css样式代码的图片路径 */
#slidingBlock {
    width:246px; height:191px;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>
<script language="javascript">
  function switchmodTag(modtag,modcontent,modk)
  {
    //modcontent栏目组编号
    var len=document.all("mod"+modcontent).length;//获得当前栏目组栏目数量
    for(i=0; i<len;i++)
    {
      if(i==modk)
      {
        document.all("mod"+modcontent)[i].className="menuOn";
        document.all("slidingList"+modcontent)[i].className="slidingList";
      }
      else
      {
        document.all("mod"+modcontent)[i].className="menuNo";
        document.all("slidingList"+modcontent)[i].className="slidingList_none";
      }
    }
  }
</script>
</head>

<body>
<table>
<tr>
   <td><div align="center">栏目组一</div></td>
   <td><div align="center">栏目组二</div></td>
</tr>
<tr>
  <td>
   <div id="slidingBlock">
   <!--switchmodTag第一个参数固顶第二个为栏目组编号-->
  <h4 class="menuOn" id="mod0" onmouseover="switchmodTag('mod','0','0');this.blur();">
  最近更新</h4>
  <h4 class="menuNo" id="mod0" onmouseover="switchmodTag('mod','0','1');this.blur();">
  近期推荐</h4>
  <h4 class="menuNo" id="mod0" onmouseover="switchmodTag('mod','0','2');this.blur();">
  热门点击</h4>
  <div class="slidingList" id="slidingList0">
    <ul>
      <li class="one"><span>1</span><a href="http://www.">第一个的信息第一个的信息</a></li>
      <li class="one"><span>2</span><a href="http://www.">第一个的信息第一个的信息</a></li>
      <li class="one"><span>3</span><a href="http://www.">第一个的信息第一个的信息信息信息</a></li>
      <li class="one"><span>4</span><a href="http://www.">第一个的信息第一个的信息</a></li>
      <li class="one"><span>5</span><a href="http://www.">第一个的信息第一个的信息</a></li>
    </ul>
  </div>
  <div class="slidingList_none" id="slidingList0">
    <ul>
      <li class="two"><span>1</span><a href="http://www.">第二个的信息第二个的信息</a></li>
      <li class="two"><span>2</span><a href="http://www.">第二个的信息第二个的信息</a></li>
      <li class="two"><span>3</span><a href="http://www.">第二个的信息第二个的信息信息信息</a></li>
      <li class="two"><span>4</span><a href="http://www.">第二个的信息第二个的信息</a></li>
      <li class="two"><span>5</span><a href="http://www.">第二个的信息第二个的信息</a></li>
      <li class="two"><span>6</span><a href="http://www.">第二个的信息第二个的信息</a></li>
      <li class="two"><span>7</span><a href="http://www.">第二个的信息第二个的信息</a></li>
    </ul>
  </div>
  <div class="slidingList_none" id="slidingList0">
    <ul>
      <li class="thr"><span>1</span><a href="http://www.">第三个的信息第三个的信息</a></li>
      <li class="thr"><span>2</span><a href="http://www.">第三个的信息第三个的信息</a></li>
      <li class="thr"><span>3</span><a href="http://www.">第三个的信息第三个的信息信息信息</a></li>
      <li class="thr"><span>4</span><a href="http://www.">第三个的信息第三个的信息</a></li>
      <li class="thr"><span>5</span><a href="http://www.">第三个的信息第三个的信息</a></li>
    </ul>
  </div>
</div>
</td>
<td>
  <div id="slidingBlock">
  <h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','1','0');this.blur();">
  最近更新</h4>
  <h4 class="menuNo" id="mod1" onmouseover="switchmodTag('mod','1','1');this.blur();">
  近期推荐</h4>
  <h4 class="menuNo" id="mod1" onmouseover="switchmodTag('mod','1','2');this.blur();">
  热门点击</h4>
  <div class="slidingList" id="slidingList1">
    <ul>
      <li class="one"><span>1</span><a href="http://www.">第一个的信息第一个的信息</a></li>
      <li class="one"><span>2</span><a href="http://www.">第一个的信息第一个的信息</a></li>
      <li class="one"><span>3</span><a href="http://www.">第一个的信息第一个的信息信息信息</a></li>
      <li class="one"><span>4</span><a href="http://www.">第一个的信息第一个的信息</a></li>
      <li class="one"><span>5</span><a href="http://www.">第一个的信息第一个的信息</a></li>
    </ul>
  </div>
  <div class="slidingList_none" id="slidingList1">
    <ul>
      <li class="two"><span>1</span><a href="http://www.">第二个的信息第二个的信息</a></li>
      <li class="two"><span>2</span><a href="http://www.">第二个的信息第二个的信息</a></li>
      <li class="two"><span>3</span><a href="http://www.">第二个的信息第二个的信息信息信息</a></li>
      <li class="two"><span>4</span><a href="http://www.">第二个的信息第二个的信息</a></li>
      <li class="two"><span>5</span><a href="http://www.">第二个的信息第二个的信息</a></li>
      <li class="two"><span>6</span><a href="http://www.">第二个的信息第二个的信息</a></li>
      <li class="two"><span>7</span><a href="http://www.">第二个的信息第二个的信息</a></li>
    </ul>
  </div>
  <div class="slidingList_none" id="slidingList1">
    <ul>
      <li class="thr"><span>1</span><a href="http://www.">第三个的信息第三个的信息</a></li>
      <li class="thr"><span>2</span><a href="http://www.">第三个的信息第三个的信息</a></li>
      <li class="thr"><span>3</span><a href="http://www.">第三个的信息第三个的信息信息信息</a></li>
      <li class="thr"><span>4</span><a href="http://www.">第三个的信息第三个的信息</a></li>
      <li class="thr"><span>5</span><a href="http://www.">第三个的信息第三个的信息</a></li>
    </ul>
  </div>
</div>
</td>
</tr>
</table>
<p>　</p>
<p>　</p>
<p>　</p>
<p>说明：如果需要点击切换的话，将onmouseover改成onclick即可，当前模块的总宽度为250px，不合适的自己调整吧，另外改变相关图片的路径的话注意修改css样式代码的图片路径</p>


<br><br>
<div align="center">

<br><br>
获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.">http://www.
#3
pstaxcgh2010-08-11 21:39
回复 2楼 yms123
在同一网页中如果要多次使用滑动门效果，怎么定义，谢谢！！
1
©2025, BC-CN.NET
电脑版