资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
无间断滚动的新闻文章列表 多浏览器兼容
<!--Quirks Mode--> <!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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__noscript" _ewebeditor_fake_tag="noscript" _ewebeditor_fake_value="%3Cnoscript%3E%20%0D%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%0D%0A%23demo%7Boverflow%3Aauto%3B%20%7D%20%0D%0A%7D%20%0D%0A%3C%2Fstyle%3E%20%0D%0A%3C%2Fnoscript%3E"> </head> <body> <div id="ForestganWrap"> <div id="forestganHeader"> <a href="/" _ewebeditor_ta_href="%2F"><img src="/img/logo.gif" _ewebeditor_ta_src="%2Fimg%2Flogo.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" _ewebeditor_ta_href="http%3A%2F%2Fwww.forest53.com%2Ftutorials%2Ftutorials_show.asp%3Fsortid%3D1%26amp%3Bid%3D76" 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" _ewebeditor_ta_href="http%3A%2F%2Fwww.forest53.com%2Ftutorials%2Ftutorials_show.asp%3Fsortid%3D4%26amp%3Bid%3D75" 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" _ewebeditor_ta_href="http%3A%2F%2Fwww.forest53.com%2Ftutorials%2Ftutorials_show.asp%3Fsortid%3D1%26amp%3Bid%3D74" title="未知大小的图片在一个已知大小容器中的水平和垂直居中（二）">未知大小的图片在一个已知大小容器中的水平和垂直居中（二） </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=73" _ewebeditor_ta_href="http%3A%2F%2Fwww.forest53.com%2Ftutorials%2Ftutorials_show.asp%3Fsortid%3D4%26amp%3Bid%3D73" 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" _ewebeditor_ta_href="http%3A%2F%2Fwww.forest53.com%2Ftutorials%2Ftutorials_show.asp%3Fsortid%3D4%26amp%3Bid%3D72" title="用ASP程序模拟实现first-child的功能">用ASP程序模拟实现first-child的功能 </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=71" _ewebeditor_ta_href="http%3A%2F%2Fwww.forest53.com%2Ftutorials%2Ftutorials_show.asp%3Fsortid%3D1%26amp%3Bid%3D71" title="本地检验网页是否符合标准的几种方法">本地检验网页是否符合标准的几种方法 </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=6&id=70" _ewebeditor_ta_href="http%3A%2F%2Fwww.forest53.com%2Ftutorials%2Ftutorials_show.asp%3Fsortid%3D6%26amp%3Bid%3D70" title="Accessibility和General Developer工具">Accessibility和General Developer工具 </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=69" _ewebeditor_ta_href="http%3A%2F%2Fwww.forest53.com%2Ftutorials%2Ftutorials_show.asp%3Fsortid%3D1%26amp%3Bid%3D69" title="未知总宽度的列表菜单水平居中的解决方案">未知总宽度的列表菜单水平居中的解决方案 </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=68" _ewebeditor_ta_href="http%3A%2F%2Fwww.forest53.com%2Ftutorials%2Ftutorials_show.asp%3Fsortid%3D4%26amp%3Bid%3D68" title="为机器人程序准备的robots.txt文件">为机器人程序准备的robots.txt文件 </a></li> <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=67" _ewebeditor_ta_href="http%3A%2F%2Fwww.forest53.com%2Ftutorials%2Ftutorials_show.asp%3Fsortid%3D1%26amp%3Bid%3D67" title="未知大小图片在已知容器中的垂直和水平居中问题">未知大小图片在已知容器中的垂直和水平居中问题 </a></li> </ul> </div> <div id="demo2"> </div> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%20%20%20%20%2F%2F%E5%9B%BE%E7%89%87%E6%97%A0%E9%97%B4%E6%96%AD%E6%BB%9A%E5%8A%A8%E4%BB%A3%E7%A0%81%EF%BC%8C%E5%85%BC%E5%AE%B9IE%E3%80%81Firefox%E3%80%81Opera%20%0D%0A%20%20%20%20%2F%2F%E5%8E%9F%E8%84%9A%E6%9C%AC%E6%98%AFIE%20only%EF%BC%8C%E6%9D%A5%E8%87%AA%E7%BD%91%E4%B8%8A%EF%BC%8C%E4%BD%9C%E8%80%85%E6%9C%AA%E7%9F%A5%20%0D%0A%20%20%20%20%2F%2F%E9%83%A8%E5%88%86%E5%86%85%E5%AE%B9%E6%98%AF%E7%94%B1forestgan%E4%B8%BA%E4%BA%86JS%E4%BB%A3%E7%A0%81%E6%A0%87%E5%87%86%E5%8C%96%EF%BC%8C%E5%85%BC%E5%AE%B9%E4%BB%A5gecko%E4%B8%BA%E5%86%85%E6%A0%B8%E7%9A%84%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BA%8E2006-10-30%E9%87%8D%E5%86%99%20%0D%0A%20%20%20%20%2F%2Fhttp%3A%2F%2Fwww.forest53.com%20%0D%0A%20%20%20%20var%20speed%3D40%3B%20%0D%0A%20%20%20%20var%20FGDemo%3Ddocument.getElementById('demo')%3B%20%0D%0A%20%20%20%20var%20FGDemo1%3Ddocument.getElementById('demo1')%3B%20%0D%0A%20%20%20%20var%20FGDemo2%3Ddocument.getElementById('demo2')%3B%20%0D%0A%20%20%20%20FGDemo2.innerHTML%3DFGDemo1.innerHTML%20%0D%0A%20%20%20%20function%20Marquee1()%7B%20%0D%0A%20%20%20%20if(FGDemo2.offsetHeight-FGDemo.scrollTop%3C%3D0)%20%0D%0A%20%20%20%20FGDemo.scrollTop-%3DFGDemo1.offsetHeight%20%0D%0A%20%20%20%20else%7B%20%0D%0A%20%20%20%20FGDemo.scrollTop%2B%2B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20var%20MyMar1%3DsetInterval(Marquee1%2Cspeed)%20%0D%0A%20%20%20%20FGDemo.onmouseover%3Dfunction()%20%7BclearInterval(MyMar1)%7D%20%0D%0A%20%20%20%20FGDemo.onmouseout%3Dfunction()%20%7BMyMar1%3DsetInterval(Marquee1%2Cspeed)%7D%20%0D%0A%3C%2Fscript%3E"> </div> <div id="desc"><a href="http://www.forest53.com" _ewebeditor_ta_href="http%3A%2F%2Fwww.forest53.com"><span id="copyright">Design by Forestgan</span></a>文章列表无间断滚动演示</div> </div> </div> </div> <div id="forestganFooter"> <address> 演示页面设计制作： <a href="http://www.forest53.com" _ewebeditor_ta_href="http%3A%2F%2Fwww.forest53.com">Forestgan</a> 采用<a href="http://www.creativecommons.cn/" _ewebeditor_ta_href="http%3A%2F%2Fwww.creativecommons.cn%2F">创作共用授权</a>--署名和非商业用途 <a href="javascript:history.back()" _ewebeditor_ta_href="javascript%3Ahistory.back()">返回前一页</a> </address> </div> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20src%3D%22http%3A%2F%2Fwww.google-analytics.com%2Furchin.js%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%3C%2Fscript%3E"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A_uacct%20%3D%20%22UA-152060-1%22%3B%20%0D%0AurchinTracker()%3B%20%0D%0A%3C%2Fscript%3E"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__noscript" _ewebeditor_fake_tag="noscript" _ewebeditor_fake_value="%3Cnoscript%3E%20%0D%0A%3Cp%3Egoogle-analytics%3C%2Fp%3E%20%0D%0A%3C%2Fnoscript%3E"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20src%3D%22%2Fjs%2Fcopyrightdemo.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__noscript" _ewebeditor_fake_tag="noscript" _ewebeditor_fake_value="%3Cnoscript%3E%3Cp%3Emy%20stat%3C%2Fp%3E%3C%2Fnoscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程