当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marquee

Javascript
提高网站信任度的技巧
javascript脚本编程解决考试分数统计问题
图片上传之前检查大小、尺寸、格式并预览的js代码
JavaScript打开客户端exe文件的代码
JavaScript confirm选择判断
javascript title闪动效果
javascript把15位身份证转成18的函数
新人报道，发个小技巧(js数组重复判断)
Javascript this关键字使用分析
javascript TextArea动态显示剩余字符
JavaScript Undefined，Null类型和NaN值区别
javascript Select标记中options操作方法集合
javascript trim 去空格函数实现代码
javascript网页关闭时提醒效果脚本
checkbox 多选框 联动实现代码
收集的比较全的automation服务器不能创建对象 异常原因和解决方法
Javascript客户端将指定区域导出到Word、Excel的代码
IE浏览器兼容Firefox的JS脚本的代码
在html页面中包含共享页面的方法
javascript replace()用法详解附实例代码

No. « 113 114 115 116 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 290 ::
收藏到网摘: n/a

<!--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>
<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>
<noscript>
<p>google-analytics</p>
</noscript>
<script src="/js/copyrightdemo.js" type="text/javascript"></script>
<noscript><p>my stat</p></noscript>
</body>
</html>
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]