最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种:

  1. 使用Marquee标签。这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了,许多浏览器不支持,甚至在IE8想,XHTML4.0的loose.dtd是可以的,而去掉loose.dtd却不行。
  2. 使用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实现新闻滚动效果的更多相关文章

  1. javascript 列表定时滚动效果

    HTML结构: <div style="width:200px;height:100px;overflow:hidden;border:1px solid #ddd;margin:20 ...

  2. Javascript实现信息滚动效果的方法

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  3. jquery 新闻滚动效果

    $(function () {     var scrollTimer = null;     var delay = 2000;     //1.鼠标对新闻触发mouseout事件后每2s调用scr ...

  4. js实现新闻滚动实例

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. js实现新闻滚动-单行滚动或者多行滚动

    注明:都是转载. 先说单行滚动: --------直接复制以下代码即可试验 转载http://www.3lian.com/edu/2011/06-30/4986.html----------- < ...

  6. JavaScript实现页面滚动到div区域div以动画方式出现

    用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...

  7. 二、JavaScript语言--JS实践--信息滚动效果制作

    运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...

  8. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  9. DIV+javascript实现首尾相连循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. shell之任务控制

    http://linux.cn/article-2680-1.html 你的 shell 会留有一张当前作业的表单,称为作业表.当你键入命令时,shell 会给它分配一个 jobID(也称作 JOBS ...

  2. Android软键盘遮挡的四种解决方案

    问题概述 在编辑框输入内容时会弹出软键盘,而手机屏幕区域有限往往会遮住输入界面,我们先看一下问题效果图: 输入用户名和密码时,系统会弹出键盘,造成系统键盘会挡住文本框的问题,如图所示: 输入密码时输入 ...

  3. java中的包装类与装箱拆箱定义

    JAVA 中int类型转String类型的通常方法,有三种:  1.String.valueOf(int i)  2.Integer.toString(int i)  3.i+"" ...

  4. MVC4 WebAPI(二)——Web API工作方式

    http://www.cnblogs.com/wk1234/archive/2012/05/07/2486872.html 在上篇文章中和大家一起学习了建立基本的WebAPI应用,立刻就有人想到了一些 ...

  5. 使用UpdatePanel 页面脚本不起作用

    在后台中这样注册js方法 ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "", " ...

  6. 【Java编程进阶-1】enum枚举的使用

    枚举主要用于枚举常量,下面举个简单的应用. 比如一个公司有如下几个部门: 研发部: 销售部: 财务部: (其他部门暂时不列举) 部门的某些信息相对固定,此时可以考虑使用枚举来说明: 枚举类 Depts ...

  7. android学习笔记二

    ADT(Android Development Tools)安卓开发工具. android项目目录简介 ==> src==>源代码文件 res==>资源文件 AndroidManif ...

  8. 一个android的各种控件库

    在这里 https://github.com/Trinea/android-open-project 很多的listview,非常棒

  9. ubuntu eclipse下配置C++ 环境

    首先你通过以下3个命令确定已安装好eclipse cdt sudo apt-get install eclipse sudo apt-get install eclipse-pde sudo apt- ...

  10. ASP.NET运行机制原理

    ASP.NET运行机制原理 一.浏览器和服务器的交互原理 (一).浏览器和服务器交互的简单描述: 1.通俗描述:我们平时通过浏览器来访问网站,其实就相当于你通过浏览器去另一台电脑上访问文件一样,只不过 ...