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

Youui · 发表于 2007-7-23 16:09:16

原来这么多人支持

Youui · 发表于 2007-7-26 02:38:06

好码别舍不得那20元了

玉都元素 · 发表于 2007-7-28 12:57:26

好东西........................

腐朽的木头 · 发表于 2007-7-28 14:45:56

看看我有多少分.

aizuimei · 发表于 2007-7-28 14:48:01

这个技术还不懂，不过挺支持的

理解万岁 · 发表于 2007-7-28 14:52:33

的确。。。这个比35的简单很多

htmlrss · 发表于 2007-7-30 12:26:10

总算大猫你看明白了............

理解万岁 · 发表于 2007-7-30 12:28:39

不过我还是不去用的。。。你个MJJ的就别收费了

poplong · 发表于 2007-7-30 20:17: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>
<li class="normal" onmouseover="nTabs(this,6);">社区</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 id="myTab0_Content6" class="none">666</div>
</div>
</div>
<div class="nTab">
<div class="TabTitle">
<ul id="myTab1">
<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="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 id="myTab1_Content4" class="none">444</div>
<div id="myTab1_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这个亦是要随着变动!
保留自己用
再发
无间断滚动的新闻文章列表，兼容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" />
<!--[if IE]><style>
@import url("/tutorials/demo/css/ie.css");
</style><![endif]-->
<style type="text/css">
<!--
a{background:#FFF; color:#333;}
a:hover{background:#FFF;color: #C00;}
#demo ul{text-align: left; }
#demo li a{line-height:2em; padding-left:1.5em;background: #F7F7F7 url(/img/arrow_l2_over.gif) no-repeat 0 50%;display: block;margin-bottom: 1px;}
#FGWrapper{width: 400px; margin:2em auto; background:#EEE;}
#demo{overflow:hidden; width: 390px;height: 150px; background:#FFF;margin: 5px;float: left;display: inline;}
#desc{ font-size: 1em; padding:0 10px 10px; clear:both;text-align:left;}
#copyright{float: right;}
-->
</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&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&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&id=74" title="未知大小的图片在一个已知大小容器中的水平和垂直居中（二）">未知大小的图片在一个已知大小容器中的水平和垂直居中（二） </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&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&id=72" title="用ASP程序模拟实现first-child的功能">用ASP程序模拟实现first-child的功能 </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=71" title="本地检验网页是否符合标准的几种方法">本地检验网页是否符合标准的几种方法 </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=6&id=70" title="Accessibility和General Developer工具">Accessibility和General Developer工具 </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=69" title="未知总宽度的列表菜单水平居中的解决方案">未知总宽度的列表菜单水平居中的解决方案 </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=68" title="为机器人程序准备的robots.txt文件">为机器人程序准备的robots.txt文件 </a></li>
<li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=67" title="未知大小图片在已知容器中的垂直和水平居中问题">未知大小图片在已知容器中的垂直和水平居中问题 </a></li>
</ul>
</div>
<div id="demo2"> </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>   采用<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> 提示：您可以先修改部分代码再运行
<!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([img]http://blog.pr1984.com/attachments/month_0612/720061212105226.gif[/img]) no-repeat; }/*默认标题样式*/ #tab .up { background:#fff url([img]http://blog.pr1984.com/attachments/month_0612/x20061212105231.gif[/img]) no-repeat; }/*选中的标题样式*/ /*修饰列表内容*/ #tab ul { margin:15px 0 0; list-style:none; padding:0; } #tab li { float:left; width:50%; background:url([img]http://blog.pr1984.com/attachments/month_0612/a20061212105235.gif[/img]) 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([img]http://blog.pr1984.com/attachments/month_0612/g20061212105238.gif[/img]) 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>
提示：您可以先修改部分代码再运行
再贴一个对比一下

复制代码

Bisn · 发表于 2007-8-6 10:51:56

不错
看看
学习中

		自动登录	找回密码
密码			立即注册

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

评分