繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
应用技巧
→ 正文内容
无间断滚动的新闻文章列表 多浏览器兼容
发布：dxy 字体：[
增加
减小
] 类型：转载
点击运行可以看到效果:
<!--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="<a href="http://www.jb51.net/list/list_105_1.htm" target="_blank"><font color=red>Access</font></a>ibility和General Developer工具"><a href="http://www.jb51.net/list/list_105_1.htm" target="_blank"><font color=red>Access</font></a>ibility和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> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-152060-1"; urchinTracker(); </script> <noscript> google-analytics </noscript> <script src="/js/copyrightdemo.js" type="text/javascript"></script> <noscript>my stat</noscript> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
无间断滚动的新闻文章列表
多浏览器兼容
百度中搜索更多的关于
无间断滚动的新闻文章列表 多浏览器兼容
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
用JavaScript和注册表脚本实现右键收藏Web页选中文本
下一篇文章：
JavaScript的9个陷阱及评点分析
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
怎么在下面的HTML里调用数组cs[]的值
JavaScript-世界上误解最深的语言分析
用JS实现网页元素阴影效果的研究总结
无间断滚动marquee的详细用法解析
一直都需要的复制到系统剪贴板之IE,firef
用javascrpt将指定网页保存为Excel的代码
清华大学出版的事半功倍系列 javascript全
兼容FireFox 用javascript写的一个画图函
javascript 如何生成不重复的随机数
Opacity.js
最 近 更 新
特想搞点新的创意出来-立体方块
fix-ie5.js扩展在IE5下不能使用的几个方法
javascript中对对层的控制
Js+Dhtml:WEB程序员简易开发工具包(预先体
Meta 标签生成器
实现iframe延时加载
更正确的asp冒泡排序
JavaScript解决Joseph问题
2007/12/23更新创意无限,简单实用(javasc
JavaScript语句可以不以;结尾的烦恼
热 点 排 行
Div+CSS+JS树型菜单，可刷新
在线游戏大家来找茬II
eval(function(p,a,c,k,e,d)系列
javascript小技巧 超强推荐
动态加载js文件 document.create
Unicode 编码转换器
彻底搞懂JS无缝滚动代码
JavaScript实现Sleep函数的代码
支持IE和FF的div＋css选项卡
由浅到深了解JavaScript类
文章评论
共有 位脚本之家网友发表了评论我来说两句