使用JavaScript实现新闻滚动效果
最近要实现一个滚动新闻效果，在网上查了一些资料，发现基本的实现方法有两种：
- 使用Marquee标签。这个标签的使用我已经转载了一篇比较详细的文章，这个标签的优点是便于使用，缺点是人们已经逐渐不适用它了，许多浏览器不支持，甚至在IE8想，XHTML4.0的loose.dtd是可以的，而去掉loose.dtd却不行。
- 使用div+javascript的方法。这种方法的好处是可以兼容几乎所有的浏览器，并且在可以预料的时间内仍能稳定运行。并且使用div使得网页可以利用现有的css资源实现很多炫目的效果。缺点是需要一定的编程经验和耐心。
使用javascript+div方式的基本原理是一样的，利用scrollTop属性和offsetheight属性来实现移动效果。一般使用两个div，里面的内容是一样的，然后利用两个div拼接，形成不断循环的效果。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var layerHeight = 100; //定义滚动区域的高度：100
var iFrame = 1; //定义每帧移动的象素
var iFrequency = 50; //定义帧频率
var timer; //定义时间句柄 //滚动新闻动作，相当于拖动layer1滚动条向下滚动，实现新闻滚动效果
function move()
{
if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight)//如果拖动完div2中的新闻，重置滚动条位置
{
document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);
}
else
{
//效果等同于向下拖动layer1的滚动条，形成新闻滚动效果
document.getElementById("layer1").scrollTop += iFrame;
}
} window.onload=function()
{
//设置layer1高度
if(document.getElementById("layer2").offsetHeight >= layerHeight)
{
document.getElementById("layer1").style.height = layerHeight;
}
else
{
document.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight;
} //将layer2中的内容复制到layer3，用两个div实现新闻循环滚动效果
document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML; //开始滚动新闻
timer = setInterval("move()",iFrequency); //当鼠标移上去时，停止滚动
document.getElementById("layer1").onmouseover=function() {clearInterval(timer);}
document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}
}
</script>
</head>
<body>
<div id='layer1' style="overflow-y:hidden;">
<div id='layer2'>
<table cellspacing="0" cellpadding="0" border="0" width="63">
<tr>
<td height="10"/>aaaaaaaaaa</td>
</tr>
<tr>
<td height="10"/>bbbbbbbbbb</td>
</tr>
<tr>
<td height="10"/>cccccccccc</td>
</tr>
</table>
</div>
<div id='layer3'></div>
</div>
</body>
</html>
转载自http://blog.csdn.net/jubincn/article/details/4689337
使用JavaScript实现新闻滚动效果的更多相关文章
- javascript 列表定时滚动效果
HTML结构: <div style="width:200px;height:100px;overflow:hidden;border:1px solid #ddd;margin:20 ...
- Javascript实现信息滚动效果的方法
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- jquery 新闻滚动效果
$(function () { var scrollTimer = null; var delay = 2000; //1.鼠标对新闻触发mouseout事件后每2s调用scr ...
- js实现新闻滚动实例
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- js实现新闻滚动-单行滚动或者多行滚动
注明:都是转载. 先说单行滚动: --------直接复制以下代码即可试验 转载http://www.3lian.com/edu/2011/06-30/4986.html----------- < ...
- JavaScript实现页面滚动到div区域div以动画方式出现
用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...
- 二、JavaScript语言--JS实践--信息滚动效果制作
运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- DIV+javascript实现首尾相连循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Python语言初学总结
课程名称:程序设计方法学 实验1:程序设计语言工具 时间:2015年10月21日星期三,第3.4节 地点:理工楼1#208 一.实验目的 1.深入理解程序设计语言及其几种常见的编程范型: 2.激发学生 ...
- awk命令拷屏
如果不指明采取什么动作,awk默认打印出所有浏览出的记录,与{print $}是一样的 模式和动作两者是可选的,如果没有模式,则action应用到全部记录,如果没有action,则输出匹配全部记录. ...
- 【转】深入PHP FTP类的详解
FTP是一种文件传输协议,它支持两种模式,一种方式叫做Standard (也就是Active,主动方式),一种是 Passive (也就是PASV,被动方式). Standard模式 FTP 的客户端 ...
- StringBuilder与StringBuffer的区别(转)
相信大家看到过很多比较String和StringBuffer区别的文章,也明白这两者的区别,然而自从Java 5.0发布以后,我们的比较列表上将多出一个对象了,这就是StringBuilder类.St ...
- Cobar使用文档（可用作MySQL大型集群解决方案）
原文:http://my.oschina.net/ydsakyclguozi/blog/374564 最近好不容易抽空研究了下Cobar,感觉这个产品确实很不错(在文档方面比Amoeba强多了),特此 ...
- 设置JSP不做浏览器缓存
CacheFilter代码: package com.my.filter; import java.io.*; import javax.servlet.*; import javax.servlet ...
- Value Dispose() cannot be called while doing CreateHandle().
在backgroundWorker run之前show出了一个窗体_frm. _frmpw = new FrmPleaseWait(); _frmpw.SetMsg("正在请求") ...
- Puppet's Commands 3.7
Puppet's Commands Puppet’s command line interface consists of a single puppet command with many subc ...
- android学习笔记16——对话框
android支持丰富的对话框,常用4中对话框: 1.AlertDialog: 2.ProgressDialog:进度对话框,这个对话框只是对进度条的封装 3.DatePickerDialog:日期选 ...
- golang rbac框架
在 https://github.com/mikespook/gorbac/tree/v1.0 github上新的版本是开发板,得用这里的老版 demo package main import ( & ...