设为首页收藏本站
切换到宽版

Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
Discuz!官方免费开源建站系统»论坛 › 增值产品交流与讨论 › SS/XS 专区 › SS/XS-模板插件 › 分享一段非常好的滑动门[可感应触发或点击触发]兼容IE7 ...
12345678下一页
返回列表 发新帖

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

[复制链接]
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 | 显示全部楼层
百度搜索来的，估计一样！

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>我的滑动门</title>
  6. <style type="text/css">
  7. body{
  8. color: #000;
  9. font-family: "宋体", arial;
  10. font-size: 12px;
  11. background: #fff;
  12. text-align: center;
  13. margin: 0;
  14. }
  15. .nTab{
  16. float: left;
  17. width: 960px;
  18. margin: 0 auto;
  19. border-bottom:1px #AACCEE solid;
  20. background:#d5d5d5;
  21. background-position:left;
  22. background-repeat:repeat-y;
  23. margin-bottom:2px;
  24. }
  25. .nTab .TabTitle{
  26. clear: both;
  27. height: 22px;
  28. overflow: hidden;
  29. }
  30. .nTab .TabTitle ul{
  31. border:0;
  32. margin:0;
  33. padding:0;
  34. }
  35. .nTab .TabTitle li{
  36. float: left;
  37. width: 70px;
  38. cursor: pointer;
  39. padding-top: 4px;
  40. padding-right: 0px;
  41. padding-left: 0px;
  42. padding-bottom: 2px;
  43. list-style-type: none;
  44. }
  45. .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;}
  46. .nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
  47. .nTab .TabContent{
  48. width:auto;background:#fff;
  49. margin: 0px auto;
  50. padding:10px 0 0 0;
  51. border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
  52. }
  53. .none {display:none;}
  54. </style>
  55. <script type="text/javascript">
  56. function nTabs(thisObj,Num){
  57. if(thisObj.className == "active")return;
  58. var tabObj = thisObj.parentNode.id;
  59. var tabList = document.getElementById(tabObj).getElementsByTagName("li");
  60. for(i=0; i <tabList.length; i++)
  61. {
  62.    if (i == Num)
  63.    {
  64.     thisObj.className = "active";
  65.        document.getElementById(tabObj+"_Content"+i).style.display = "block";
  66.    }else{
  67.     tabList[i].className = "normal";
  68.     document.getElementById(tabObj+"_Content"+i).style.display = "none";
  69.    }
  70. }
  71. }
  72. </script>

  74. </head>
  75. <body>
  76. <br />
  77. <br />
  78. <div align="center" style="padding-left:25px;">
  79. <!-- 选项卡0开始 -->
  80.    <div class="nTab">
  81.      <!-- 标题开始 -->
  82.      <div class="TabTitle">
  83.        <ul id="myTab0">
  84.          <li class="active" onmouseover="nTabs(this,0);">全部</li>
  85.          <li class="normal" onmouseover="nTabs(this,1);">日志</li>
  86.          <li class="normal" onmouseover="nTabs(this,2);">咨询</li>
  87.          <li class="normal" onmouseover="nTabs(this,3);">相册</li>
  88.          <li class="normal" onmouseover="nTabs(this,4);">商城</li>
  89.          <li class="normal" onmouseover="nTabs(this,5);">社区</li>
  90.    <li class="normal" onmouseover="nTabs(this,6);">社区</li>
  91.        </ul>
  92.      </div>
  93.      <!-- 内容开始 -->
  94.      <div class="TabContent">
  95.        <div id="myTab0_Content0"> 000 </div>
  96.        <div id="myTab0_Content1" class="none">111</div>
  97.        <div id="myTab0_Content2" class="none">222</div>
  98.        <div id="myTab0_Content3" class="none">333</div>
  99.        <div id="myTab0_Content4" class="none">444</div>
  100.        <div id="myTab0_Content5" class="none">555</div>
  101.     <div id="myTab0_Content6" class="none">666</div>
  102.      </div>
  103.    </div>
  104.    <!-- 选项卡0结束 -->
  105.    <!-- 选项卡0开始 -->
  106.    <div class="nTab">
  107.      <!-- 标题开始 -->
  108.      <div class="TabTitle">
  109.        <ul id="myTab1">
  110.          <li class="active" onmouseover="nTabs(this,0);">全部</li>
  111.          <li class="normal" onmouseover="nTabs(this,1);">日志</li>
  112.          <li class="normal" onmouseover="nTabs(this,2);">咨询</li>
  113.          <li class="normal" onmouseover="nTabs(this,3);">相册</li>
  114.          <li class="normal" onmouseover="nTabs(this,4);">商城</li>
  115.          <li class="normal" onmouseover="nTabs(this,5);">社区</li>
  116.        </ul>
  117.      </div>
  118.      <!-- 内容开始 -->
  119.      <div class="TabContent">
  120.        <div id="myTab1_Content0"> 000 </div>
  121.        <div id="myTab1_Content1" class="none">111</div>
  122.        <div id="myTab1_Content2" class="none">222</div>
  123.        <div id="myTab1_Content3" class="none">333</div>
  124.        <div id="myTab1_Content4" class="none">444</div>
  125.        <div id="myTab1_Content5" class="none">555</div>
  126.      </div>
  127.    </div>
  128.    <!-- 选项卡0结束 -->
  129.    <!-- 选项卡1开始 -->
  130.    <div class="nTab" style=width:288px>
  131.      <!-- 标题开始 -->
  132.      <div class="TabTitle">
  133.        <ul id="myTab1">
  134.          <li class="active" onclick="nTabs(this,0);">aaa</li>
  135.          <li class="normal" onclick="nTabs(this,1);">bbb</li>
  136.          <li class="normal" onclick="nTabs(this,2);">ccc</li>
  137.          <li class="normal" onclick="nTabs(this,3);">单击</li>
  138.        </ul>
  139.      </div>
  140.      <!-- 内容开始 -->
  141.      <div class="TabContent">
  142.        <div id="myTab1_Content0"> 000 </div>
  143.        <div id="myTab1_Content1" class="none"> 111 </div>
  144.        <div id="myTab1_Content2" class="none"> 222 </div>
  145.        <div id="myTab1_Content3" class="none"> 333 </div>
  146.      </div>
  147.    </div>
  148.    <!-- 选项卡1结束 -->
  149. </div>
  150. </body>
  151. </html>    提示：您可以先修改部分代码再运行
  152. 如果是感应触发.就选onmouseover
  153. 如果是点击触发.就选onclick      [把它们两互相替换,就可随时变为感应或点击了]

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

  158. 保留自己用
  159. 再发
  160. 无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marqu

  162. <!--Quirks Mode-->
  163. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  164. <html xmlns="http://www.w3.org/1999/xhtml">
  165. <head>
  166. <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
  167. <title>Fifty Studio│无间断滚动的新闻文章列表</title>
  168. <link rel="stylesheet" type="text/css" href="/tutorials/demo/css/main.css" />
  169. <!--[if IE]><style>
  170. @import url("/tutorials/demo/css/ie.css");
  171. </style><![endif]-->
  172. <style type="text/css">
  173. <!--
  174. a{background:#FFF; color:#333;}
  175. a:hover{background:#FFF;color: #C00;}
  176. #demo ul{text-align: left; }
  177. #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;}
  178. #FGWrapper{width: 400px; margin:2em auto; background:#EEE;}
  179. #demo{overflow:hidden; width: 390px;height: 150px; background:#FFF;margin: 5px;float: left;display: inline;}
  180. #desc{ font-size: 1em; padding:0 10px 10px; clear:both;text-align:left;}
  181. #copyright{float: right;}
  182. -->
  183. </style>
  184. <noscript>
  185. <style type="text/css">
  186. #demo{overflow:auto; }
  187. }
  188. </style>
  189. </noscript>
  190. </head>
  191. <body>
  192. <div id="ForestganWrap">
  193.    <div id="forestganHeader"> <a href="/"><img src="/img/logo.gif" width="170" height="40" alt="Fifty Studio" class="logo" /></a>
  194.      <h1>CSS 布局演示 CSS Layout by Forestgan</h1>
  195.      <h2 id="demo_date">2006-11-1 发表</h2>
  196.    </div>
  197.    <div id="forestganMiddle"> <div id="FGWrapper">
  198. <div id="demo">
  199. <div id="demo1">
  200. <ul>
  201.      <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>
  202.      <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>
  203.      <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&amp;id=74" title="未知大小的图片在一个已知大小容器中的水平和垂直居中（二）">未知大小的图片在一个已知大小容器中的水平和垂直居中（二） </a></li>
  204.      <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>
  205.      <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>
  206.      <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&amp;id=71" title="本地检验网页是否符合标准的几种方法">本地检验网页是否符合标准的几种方法 </a></li>
  207.      <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>
  208.      <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&amp;id=69" title="未知总宽度的列表菜单水平居中的解决方案">未知总宽度的列表菜单水平居中的解决方案 </a></li>
  209.      <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&amp;id=68" title="为机器人程序准备的robots.txt文件">为机器人程序准备的robots.txt文件 </a></li>
  210.      <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&amp;id=67" title="未知大小图片在已知容器中的垂直和水平居中问题">未知大小图片在已知容器中的垂直和水平居中问题 </a></li>
  211. </ul>
  212. </div>
  213. <div id="demo2">&nbsp;</div>
  214. <script type="text/javascript">
  215. //图片无间断滚动代码，兼容IE、Firefox、Opera
  216. //原脚本是IE only，来自网上，作者未知
  217. //部分内容是由forestgan为了JS代码标准化，兼容以gecko为内核的浏览器于2006-10-30重写
  218. //http://www.forest53.com
  219. var speed=40;
  220. var FGDemo=document.getElementById('demo');
  221. var FGDemo1=document.getElementById('demo1');
  222. var FGDemo2=document.getElementById('demo2');
  223. FGDemo2.innerHTML=FGDemo1.innerHTML
  224. function Marquee1(){
  225. if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0)
  226. FGDemo.scrollTop-=FGDemo1.offsetHeight
  227. else{
  228. FGDemo.scrollTop++
  229. }
  230. }
  231. var MyMar1=setInterval(Marquee1,speed)
  232. FGDemo.onmouseover=function() {clearInterval(MyMar1)}
  233. FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
  234. </script> </div>
  235. <div id="desc"><a href="http://www.forest53.com"><span id="copyright">Design by Forestgan</span></a>文章列表无间断滚动演示</div>
  236. </div> </div>
  237. </div>
  238. <div id="forestganFooter">
  239.    <address>
  240.    演示页面设计制作： <a href="http://www.forest53.com">Forestgan</a> &nbsp;&nbsp;采用<a href="http://www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途<br /><a href="javascript:history.back()">返回前一页</a>
  241.    </address>
  242. </div>
  243. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
  244. </script>
  245. <script type="text/javascript">
  246. _uacct = "UA-152060-1";
  247. urchinTracker();
  248. </script>
  249. <noscript>
  250. <p>google-analytics</p>
  251. </noscript>
  252. <script src="/js/copyrightdemo.js" type="text/javascript"></script>
  253. <noscript><p>my stat</p></noscript>
  254. </body>
  255. </html>    提示：您可以先修改部分代码再运行




  260. <!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"> <!-- var h=document.getElementById("tab").getElementsByTagName("h3"); var d=document.getElementById("tab").getElementsByTagName("div"); function go_to(ao){ for(var i=0;i<h.length;i++){ if(ao-1==i){ h[i].className+=" up"; d[i].className+=" block"; } else { h[i].className=" "; d[i].className=" "; } } } //--> </script> </div> </body> </html>
  261.     提示：您可以先修改部分代码再运行
  262. 再贴一个对比一下
复制代码
回复

使用道具 举报

Bisn 发表于 2007-8-6 10:51:56 | 显示全部楼层
不错
看看
学习中
回复

使用道具 举报

dbpeter 发表于 2007-8-6 11:18:21 | 显示全部楼层
www.dolike.com
www.0427s.com
www.sunnyozs.com
回复

使用道具 举报

下一页 »
12345678下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-16 13:36 , Processed in 0.040481 second(s), 2 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表