无间断滚动的新闻文章列表，兼容IE、Firefox和Oper...

来源：互联网发布：vb和java的区别编辑：程序博客网时间：2024/06/06 19:31

以下是HTML网页特效代码，点击运行按钮可查看效果：

<!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│无<strong>间断滚动</strong>的<strong>新闻文章</strong>列表</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></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的<strong>兼容</strong>--Box Model Changes">Internet Explorer 7 对CSS的<strong>兼容</strong>--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"> //图片无<strong>间断滚动</strong>代码，<strong>兼容</strong>IE、Firefox、Opera //原脚本是IE only，来自网上，作者未知 //部分内容是由forestgan为了JS代码标准化，<strong>兼容</strong>以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><strong>文章</strong>列表无<strong>间断滚动</strong>演示</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><script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript">_uacct = "UA-152060-1";urchinTracker();</script><noscript><p>google-analytics</p></noscript><script src="/js/copyrightdemo.js" type="text/javascript"></script><noscript><p>my stat</p></noscript></body></html>

详细页面：http://www.verydemo.com/demo_c101_i65093.html

0 0