A continuously scrolling list of news articles, compatible with IE, Firefox and Opera, and compliant with W3C standards. Can be used as Marquee_javascript technique

WBOY

Release： 2016-05-16 19:13:07

Original

1019 people have browsed it

Fifty Studio│无间断滚动的新闻文章列表

CSS 布局演示 CSS Layout by Forestgan

2006-11-1 发表

三列自适应宽度液态布局│Three Column Liquid Layouts

Internet Explorer 7 对CSS的兼容--Box Model Changes

未知大小的图片在一个已知大小容器中的水平和垂直居中（二）

为不同的浏览器载入不同CSS的二种方法CSS Browser Selector

用ASP程序模拟实现first-child的功能

本地检验网页是否符合标准的几种方法

Accessibility和General Developer工具

未知总宽度的列表菜单水平居中的解决方案

为机器人程序准备的robots.txt文件

未知大小图片在已知容器中的垂直和水平居中问题

Design by ForestganUninterrupted scrolling demonstration of article list

Demo page design and production: Forestgan adoptsCreative Commons License--Attribution and Non-Commercial Use
< ;a href="javascript:history.back()">Return to the previous page

Fifty Studio│Continuous scrolling list of news articles<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
</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>

<div id="ForestganWrap">
<div id="forestganHeader">
<a href="/">
    <img src="/img/logo.gif"    style="max-width:90%"  style="max-width:90%" alt="Fifty Studio" class="logo">CSS Layout Demonstration CSS Layout by Forestgan</a>
    <h1>2006-11-1 Published</h1>
  <h2 id="demo_date">
<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 │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 Compatibility with CSS--Box Model Changes </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=74" title="未知大小的图片在一个已知大小容器中的水平和垂直居中（二）">Centering an image of unknown size horizontally and vertically in a container of known size (2) </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=73" title="为不同的浏览器载入不同CSS的二种方法CSS Browser Selector">Two ways to load different CSS for different browsers CSS Browser Selector </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=72" title="用ASP程序模拟实现first-child的功能">Use ASP program to simulate the first-child function </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=71" title="本地检验网页是否符合标准的几种方法">Several ways to locally check whether a web page meets the standards </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=6&id=70" title="Accessibility和General Developer工具">Accessibility and General Developer Tools </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=69" title="未知总宽度的列表菜单水平居中的解决方案">Solution for horizontally centering list menu with unknown total width </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=4&id=68" title="为机器人程序准备的robots.txt文件">Robots.txt file prepared for robot program </a></li>
    <li><a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=67" title="未知大小图片在已知容器中的垂直和水平居中问题">Vertical and horizontal centering issues of unknown size images in known containers </a></li>
</ul>
</div>
<div id="demo2"> </div>
</div> <div id="desc">
<a href="http://www.forest53.com"><span id="copyright"></span>Design by Forestgan</a>
</div>Demo of continuous scrolling of article list</div>
</div> </h2>
</div>
<div id="forestganFooter">
<address>
  <a href="http://www.forest53.com">
  Demo page design and production: </a>Forestgan<a href="http://www.creativecommons.cn/"> Using </a>Creative Commons License<a href="javascript:history.back()">--Attribution and non-commercial use
</a>Return to previous page</address>
  </div>

<br><input onclick="runEx('runcode97008')" type="button" value="运行代码"><input onclick="doCopy('runcode97008')" type="button" value="复制代码"> <input onclick="doSave(runcode97008)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl A select all Note: </a>If you need to introduce external Js, you need to refresh to execute </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>