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

原创: 2016-05-16 19:13:07 679浏览

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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 Forestgan文章列表无间断滚动演示

演示页面设计制作： Forestgan 采用创作共用授权--署名和非商业用途
返回前一页

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Fifty Studio│无间断滚动的新闻文章列表</title><link rel="stylesheet" type="text/css" href="//m.sbmmt.com/m/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="//m.sbmmt.com/m/"><img src="//m.sbmmt.com/m/img/logo.gif"    style="max-width:90%"   style="max-width:90%" 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>--署名和非商业用途
<a href="javascript:history.back()">返回前一页</a> 
  </address> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marquee PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：javascript学习网址备忘_javascript技巧下一条：js支持158、159开头的手机号的验证_表单特效