请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 ...

发新帖

查看: 37869|回复: 20

一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera [复制链接]

tdlisheng　楼主

帖子: 129
体力: 610
威望: 2

发表于 2007-5-20 09:33:57 |显示全部楼层

<!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 type="text/css">
body{
color: #000;
font-family: "宋体", arial;
font-size: 12px;
background: #fff;
text-align: center;
margin: 0;
}
.nTab{
float: left;
width: 960px;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}

</style>

<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
  if (i == Num)
  {
   thisObj.className = "active"; 
      document.getElementById(tabObj+"_Content"+i).style.display = "block";
  }else{
   tabList[i].className = "normal"; 
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
  }
} 
}
</script>

</head>
<body>
<br />
<br />

<div align="center" style="padding-left:25px;">

  <div class="nTab">
    
    <div class="TabTitle">
      <ul id="myTab0">
        <li class="active" onmouseover="nTabs(this,0);">全部</li>
        <li class="normal" onmouseover="nTabs(this,1);">日志</li>
        <li class="normal" onmouseover="nTabs(this,2);">咨询</li>
        <li class="normal" onmouseover="nTabs(this,3);">相册</li>
        <li class="normal" onmouseover="nTabs(this,4);">商城</li>
        <li class="normal" onmouseover="nTabs(this,5);">社区</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab0_Content0"> 000 </div>
      <div id="myTab0_Content1" class="none">111</div>
      <div id="myTab0_Content2" class="none">222</div>
      <div id="myTab0_Content3" class="none">333</div>
      <div id="myTab0_Content4" class="none">444</div>
      <div id="myTab0_Content5" class="none">555</div>
    </div>
  </div>
  
  
  <div class="nTab" style=width:288px>
    
    <div class="TabTitle">
      <ul id="myTab1">
        <li class="active" onclick="nTabs(this,0);">aaa</li>
        <li class="normal" onclick="nTabs(this,1);">bbb</li>
        <li class="normal" onclick="nTabs(this,2);">ccc</li>
        <li class="normal" onclick="nTabs(this,3);">单击</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab1_Content0"> 000 </div>
      <div id="myTab1_Content1" class="none"> 111 </div>
      <div id="myTab1_Content2" class="none"> 222 </div>
      <div id="myTab1_Content3" class="none"> 333 </div>
    </div>
  </div>
  
</div>

</body>
</html>

提示：您可以先修改部分代码再运行

如果是感应触发.就选onmouseover
如果是点击触发.就选onclick [把它们两互相替换,就可随时变为感应或点击了]

而如果想在一个页面上有N个滑动门
就复制一套...将myTab0改成myTab1 myTab2 myTab3 等等等..都可以..或者换成你自己喜欢的名字...当然myTab0_Content0这个亦是要随着变动!

保留自己用

西部数码顶级域名注册商39元抢注！

使用道具举报

tdlisheng　楼主

帖子: 129
体力: 610
威望: 2

发表于 2007-5-20 09:38:26 |显示全部楼层

再发
无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marqu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>Fifty Studio│无间断滚动的新闻文章列表</title>
<link rel="stylesheet" type="text/css" href="/tutorials/demo/css/main.css" />

<style type="text/css">

</style>
<noscript>
<style type="text/css">
#demo{overflow:auto; }
}
</style>
</noscript>
</head>
<body>
<div id="ForestganWrap">
  <div id="forestganHeader"> <a href="/"><img src="/img/logo.gif" width="170" height="40" alt="Fifty Studio" class="logo" /></a>
    <h1>CSS 布局演示 CSS Layout by Forestgan</h1>
    <h2 id="demo_date">2006-11-1 发表</h2>
  </div>
  <div id="forestganMiddle"> <div id="FGWrapper">
<div id="demo">
<div id="demo1">
<ul>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&amp;id=76" title="三列自适应宽度液态布局│Three Column Liquid Layouts">三列自适应宽度液态布局│Three Column Liquid Layouts </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&amp;id=75" title="Internet Explorer 7 对CSS的兼容--Box Model Changes">Internet Explorer 7 对CSS的兼容--Box Model Changes </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&amp;id=74" title="未知大小的图片在一个已知大小容器中的水平和垂直居中（二）">未知大小的图片在一个已知大小容器中的水平和垂直居中（二） </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&amp;id=73" title="为不同的浏览器载入不同CSS的二种方法CSS Browser Selector">为不同的浏览器载入不同CSS的二种方法CSS Browser Selector </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&amp;id=72" title="用ASP程序模拟实现first-child的功能">用ASP程序模拟实现first-child的功能 </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&amp;id=71" title="本地检验网页是否符合标准的几种方法">本地检验网页是否符合标准的几种方法 </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=6&amp;id=70" title="Accessibility和General Developer工具">Accessibility和General Developer工具 </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&amp;id=69" title="未知总宽度的列表菜单水平居中的解决方案">未知总宽度的列表菜单水平居中的解决方案 </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&amp;id=68" title="为机器人程序准备的robots.txt文件">为机器人程序准备的robots.txt文件 </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&amp;id=67" title="未知大小图片在已知容器中的垂直和水平居中问题">未知大小图片在已知容器中的垂直和水平居中问题 </a></li>
</ul>
</div>
<div id="demo2">&nbsp;</div>
<script type="text/javascript">
	//图片无间断滚动代码，兼容IE、Firefox、Opera
	//原脚本是IE only，来自网上，作者未知
	//部分内容是由forestgan为了JS代码标准化，兼容以gecko为内核的浏览器于2006-10-30重写
	//http://www.forest53.com
	var speed=40;
	var FGDemo=document.getElementById('demo');
	var FGDemo1=document.getElementById('demo1');
	var FGDemo2=document.getElementById('demo2');
	FGDemo2.innerHTML=FGDemo1.innerHTML
	function Marquee1(){
	if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0)
	FGDemo.scrollTop-=FGDemo1.offsetHeight
	else{
	FGDemo.scrollTop++
	}
	}
	var MyMar1=setInterval(Marquee1,speed)
	FGDemo.onmouseover=function() {clearInterval(MyMar1)}
	FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script> </div>
<div id="desc"><a href="http://www.forest53.com"><span id="copyright">Design by Forestgan</span></a>文章列表无间断滚动演示</div>
</div> </div>
</div>
<div id="forestganFooter">
  <address>
  演示页面设计制作： <a href="http://www.forest53.com">Forestgan</a> &nbsp;&nbsp;采用<a href="http://www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途<br /><a href="javascript:history.back()">返回前一页</a>
  </address>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-152060-1";
urchinTracker();
</script>
<noscript>
<p>google-analytics</p>
</noscript>
<script src="/js/copyrightdemo.js" type="text/javascript"></script>
<noscript><p>my stat</p></noscript>

</body>
</html>

提示：您可以先修改部分代码再运行

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

tdlisheng　楼主

帖子: 129
体力: 610
威望: 2

发表于 2007-5-20 09:53:08 |显示全部楼层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>标准布局应用：选项卡</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="PR" />
<script type="text/javascript">
</script>

<style type="text/css">
/* 选项卡关键属性 */
#tab { width:570px; height:260px; position:relative; } /*设置容器高宽等*/
html > body #tab { width:566px; }/*兼容IE6:IE6下宽度不够*/
#tab div { position:absolute; top:26px; left:0; width:564px; height:234px; border:solid #eee; border-width:0 1px 1px; }/*设置被操作容器高宽等*/
#tab div { display:none; }/*设置被操作容器默认隐藏:不用ID是因为下面将利用class来控制被操作容器显示,而class优先级低于id选择器*/
#tab .block { display:block; }/*选中的被操作容器*/
#tab h3 { float:left; width:114px; height:26px; line-height:26px; margin:0 -1px 0 0; font-size:14px; cursor:pointer; font-weight:normal; text-align:center; color:#00007F; background:#eee url(http://blog.pr1984.com/attachments/month_0612/720061212105226.gif) no-repeat; }/*默认标题样式*/
#tab .up { background:#fff url(http://blog.pr1984.com/attachments/month_0612/x20061212105231.gif) no-repeat; }/*选中的标题样式*/

/*修饰列表内容*/
#tab ul { margin:15px 0 0; list-style:none; padding:0; }
#tab li { float:left; width:50%; background:url(http://blog.pr1984.com/attachments/month_0612/a20061212105235.gif) no-repeat 25px 10px; }
#tab li a { display:block; width:84%; height:25px; line-height:25px; margin-left:8%; font-size:12px; text-decoration:none; color:#333; background:url(http://blog.pr1984.com/attachments/month_0612/g20061212105238.gif) repeat-x left bottom; text-indent:10px; }
#tab li a:hover { text-decoration:underline; color:#f00; }
</style>
</head>
<body>
<div id="tab">
	
	<h3 class="up" onclick="go_to(1);">选择一</h3>
	<div class="block">
	<ul>
	<li><a href="#">1张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	<li><a href="#">张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	</ul>
	</div>
	
	<h3 onclick="go_to(2);">选择二</h3>
	<div>
	<ul>
	<li><a href="#">2张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	<li><a href="#">张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	</ul>
	</div>
	
	<h3 onclick="go_to(3);">选择三</h3>
	<div>
	<ul>
	<li><a href="#">3张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	<li><a href="#">张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	</ul>
	</div>
	
	<h3 onclick="go_to(4);">选择四</h3>
	<div>
	<ul>
	<li><a href="#">4张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	<li><a href="#">张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	</ul>
	</div>
	
	<h3 onclick="go_to(5);">选择五</h3>
	<div>
	<ul>
	<li><a href="#">5张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	<li><a href="#">张钰和于连的同源悲剧 </a></li>
	<li><a href="#">从人大代表侯建军终审 </a></li>
	<li><a href="#">车辆交付问题 </a></li>
	<li><a href="#">贻误申请执行期限损失 </a></li>
	<li><a href="#">民警特权扣车,油变成 </a></li>
	<li><a href="#">地下室及公摊面积不收 </a></li>
	<li><a href="#">当前医疗广告存在的问 </a></li>
	<li><a href="#">新医改要注意的几个问 </a></li>
	</ul>
	</div>
	
	<script type="text/javascript">
	
	</script>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

再贴一个对比一下

使用道具举报

tdlisheng　楼主

帖子: 129
体力: 610
威望: 2

发表于 2007-5-20 10:09:37 |显示全部楼层

兼容IE和FireFox的间隔滚动代码

使用道具举报

帖子: 164
体力: 374
威望: 0

发表于 2007-8-28 09:52:47 |显示全部楼层

请问一个页面里面有多个滑动门那代码要怎么用啊！

使用道具举报

webdesigning　

风无双

钻石会员 

帖子: 1979
体力: 6800
威望: 1
居住地: 广东省深圳市

发表于 2007-8-28 11:15:44 |显示全部楼层

更正下...
应该是选项卡...

这里并未使用滑动门技术

使用道具举报

可也

帖子: 482
体力: 3930
威望: 3
居住地: 广东省广州市

发表于 2007-11-2 22:59:35 |显示全部楼层

请问无间断向下滚动怎么实现？
scrollTop为负值似乎无效

使用道具举报

高级会员 

帖子: 221
体力: 678
威望: 0

发表于 2007-11-22 15:36:03 |显示全部楼层

原帖由 tdlisheng 于 2007-5-20 09:38 发表
再发
无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marqu
...

非常好！谢谢楼主！

就是在 Fx 2.0.0.9 下看不到滚动新闻外面的那个框。IE6.0sp2 没有问题。

使用道具举报

帖子: 38
体力: 285
威望: 0

发表于 2007-11-23 15:21:49 |显示全部楼层

换成utf-8格式后，怎么全乱了

使用道具举报

新手上路 

帖子: 10
体力: 58
威望: 0
居住地: 山西省太原市

发表于 2007-12-2 21:53:33 |显示全部楼层

<!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 type="text/css">
body{
color: #000;
font-family: "宋体", arial;
font-size: 12px;
background: #fff;
text-align: center;
margin: 0;
}
.nTab{
float: left;
width: 960px;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabTitle .active_1{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal_1{background:#B588E3;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}
</style>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
  if (i == Num)
  {
   thisObj.className = "active"; 
      document.getElementById(tabObj+"_Content"+i).style.display = "block";
  }else{
   tabList[i].className = "normal"; 
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
  }
} 
}
</script>
</head>
<body>
<br />
<br />
<div align="center" style="padding-left:25px;">

  <div class="nTab">
    
    <div class="TabTitle">
      <ul id="myTab0">
        <li class="active" onmouseover="nTabs(this,0);">全部</li>
        <li class="normal" onmouseover="nTabs(this,1);">日志</li>
        <li class="normal" onmouseover="nTabs(this,2);">咨询</li>
        <li class="normal" onmouseover="nTabs(this,3);">相册</li>
        <li class="normal" onmouseover="nTabs(this,4);">商城</li>
        <li class="normal" onmouseover="nTabs(this,5);">社区</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab0_Content0"> 000 </div>
      <div id="myTab0_Content1" class="none">111</div>
      <div id="myTab0_Content2" class="none">222</div>
      <div id="myTab0_Content3" class="none">333</div>
      <div id="myTab0_Content4" class="none">444</div>
      <div id="myTab0_Content5" class="none">555</div>
    </div>
  </div>
  
  
  <div class="nTab" style=width:288px>
    
    <div class="TabTitle">
      <ul id="myTab1">
        <li class="active_1" onclick="nTabs(this,0);">aaa</li>
        <li class="normal_1" onclick="nTabs(this,1);">bbb</li>
        <li class="normal_1" onclick="nTabs(this,2);">ccc</li>
        <li class="normal_1" onclick="nTabs(this,3);">单击</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab1_Content0"> 000 </div>
      <div id="myTab1_Content1" class="none"> 111 </div>
      <div id="myTab1_Content2" class="none"> 222 </div>
      <div id="myTab1_Content3" class="none"> 333 </div>
    </div>
  </div>
  
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

我使用的时候，多个的时候。调整css后，为什么一点又回到第一个上了？

使用道具举报

帖子: 2981
体力: 12722
威望: 10

发表于 2007-12-3 21:30:50 |显示全部楼层

回复 #51 52lamp 的帖子

<!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 type="text/css">
body{
color: #000;
font-family: "宋体", arial;
font-size: 12px;
background: #fff;
text-align: center;
margin: 0;
}
.nTab{
float: left;
width: 960px;
margin: 0 auto;
border-bottom:1px #AACCEE solid;
background:#d5d5d5;
background-position:left;
background-repeat:repeat-y;
margin-bottom:2px;
}
.nTab .TabTitle{
clear: both;
height: 22px;
overflow: hidden;
}
.nTab .TabTitle ul,.nTab .TabTitle_1 ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li,.nTab .TabTitle_1 li{
float: left;
width: 70px;
cursor: pointer;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 2px;
list-style-type: none;
}
.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
.nTab .TabTitle_1 .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}
.nTab .TabTitle_1 .normal{background:#B588E3;border:1px #AACCEE solid;}
.nTab .TabContent{
width:auto;background:#fff;
margin: 0px auto;
padding:10px 0 0 0;
border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
}
.none {display:none;}
</style>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
  if (i == Num)
  {
   thisObj.className = "active"; 
      document.getElementById(tabObj+"_Content"+i).style.display = "block";
  }else{
   tabList[i].className = "normal"; 
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
  }
} 
}
</script>
</head>
<body>
<br />
<br />
<div align="center" style="padding-left:25px;">

  <div class="nTab">
    
    <div class="TabTitle">
      <ul id="myTab0">
        <li class="active" onmouseover="nTabs(this,0);">全部</li>
        <li class="normal" onmouseover="nTabs(this,1);">日志</li>
        <li class="normal" onmouseover="nTabs(this,2);">咨询</li>
        <li class="normal" onmouseover="nTabs(this,3);">相册</li>
        <li class="normal" onmouseover="nTabs(this,4);">商城</li>
        <li class="normal" onmouseover="nTabs(this,5);">社区</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab0_Content0"> 000 </div>
      <div id="myTab0_Content1" class="none">111</div>
      <div id="myTab0_Content2" class="none">222</div>
      <div id="myTab0_Content3" class="none">333</div>
      <div id="myTab0_Content4" class="none">444</div>
      <div id="myTab0_Content5" class="none">555</div>
    </div>
  </div>
  
  
  <div class="nTab" style=width:288px>
    
    <div class="TabTitle_1">
      <ul id="myTab1">
        <li class="active" onclick="nTabs(this,0);">aaa</li>
        <li class="normal" onclick="nTabs(this,1);">bbb</li>
        <li class="normal" onclick="nTabs(this,2);">ccc</li>
        <li class="normal" onclick="nTabs(this,3);">单击</li>
      </ul>
    </div>
    
    <div class="TabContent">
      <div id="myTab1_Content0"> 000 </div>
      <div id="myTab1_Content1" class="none"> 111 </div>
      <div id="myTab1_Content2" class="none"> 222 </div>
      <div id="myTab1_Content3" class="none"> 333 </div>
    </div>
  </div>
  
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

使用道具举报

蜡笔小菜

帖子: 106
体力: 457
威望: 0

发表于 2007-12-26 15:23:53 |显示全部楼层

如果文字导航文字很多,超过背景114的宽度,但是背景是图片,宽度为50,怎么办?

使用道具举报

帖子: 108
体力: 497
威望: 0
居住地: 福建省福州市

发表于 2008-6-7 14:09:19 |显示全部楼层

延时200MS <li class="normal" onmouseover="setTimeout('nTabs(this,5)',200);">社区</li> 为什么不行啊

[ 本帖最后由 lin516 于 2008-6-7 14:20 编辑 ]

中国Asp之家

使用道具举报

帖子: 35
体力: 80
威望: 0
居住地: 云南省昆明市

发表于 2008-6-7 14:47:57 |显示全部楼层

楼主,你那个"无间断滚动的新闻文章列表"我用到我自己的页面中了,插入图片后,设置成全屏,滚动就会出现闪屏,是怎么回事,

使用道具举报

帖子: 1535
体力: 7904
威望: 0

发表于 2008-6-13 11:07:08 |显示全部楼层

请问下,这个改成背景是图片怎么做? 我改了下图片,,,把 li 换成了 TD,,结果没效果了.郁闷

www.i1.cn
找些人帮忙。。。

使用道具举报

帖子: 71
体力: 207
威望: 0
居住地: 江苏省南京市

发表于 2009-4-18 15:05:02 |显示全部楼层

那个滑动门代码怎么变成不同样子的

使用道具举报

帖子: 33
体力: 154
威望: 0
居住地: 四川省成都市

发表于 2009-4-21 16:04:43 |显示全部楼层

又是滑动门..看来真的是被传变样了,,
6楼的正解,,,
应该是TAB选项卡,汗,今天咋就遇到这么我乱说的

www.hisland.cn

使用道具举报

叶飞雪

银牌会员 

帖子: 541
体力: 1138
威望: 3
居住地: 广东省深圳市

发表于 2009-4-21 17:28:55 |显示全部楼层

感觉“滑动门”这个词被用得太乱了，只是因为滑动门常常是伴随着选项卡的效果，所以很多时候都被人混淆了。
楼主的这个只是选项卡。滑动门是指CSS中一种自适应伸缩的方法

http://www.moondyzone.com

使用道具举报

双子座

中级会员 

帖子: 1044
体力: 894
威望: 0
居住地: 浙江省杭州市

发表于 2009-4-21 18:09:38 |显示全部楼层

二楼的怎光可以往上滑，不能往下滑？

I AM WHO I AM

使用道具举报

paopaoxiaoxin　

泡泡小新

帖子: 510
体力: 634
威望: 0
居住地: 山东省济南市

发表于 2009-4-21 19:19:56 |显示全部楼层

很好~~~~~

使用道具举报

初级会员 

帖子: 47
体力: 109
威望: 0
居住地: 海南省海口市

发表于 2009-7-11 13:51:12 |显示全部楼层

都是横的，竖的应该怎么写？

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-13 08:49 , Processed in 0.170332 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部