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

  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. .htaccess中301强制跳转到带www前缀或不带www的域名

    相信很多站长朋友都有这样的的问题出现.即带www前缀的域名与不带www前缀的顶级域名收录情况是不同的.这个问题主要是由于搜索引擎对于顶级域名与二级域名权重判定不同造成的.毫无疑问地,唯一的域名能够给你 ...

  2. android数据存储之SharedPreferences

    一.SharedPreferences简介      (1)SharedPreferences是Android平台上一个轻量级的存储类,用来保存应用的一些常用配置,比如Activity状态,Activ ...

  3. SQL集合运算参考及案例(一)：列值分组累计求和

    概述 目前企业应用系统使用的大多数据库都是关系型数据库,关系数据库依赖的理论就是针对集合运算的关系代数.关系代数是一种抽象的查询语言,是关系数据操纵语言的一种传统表达方式.不过我们在工作中发现,很多人 ...

  4. mysql5.7.9 源码安装 (转）

    1,安装所有包 yum -y install gcc-c++ ncurses-devel cmake make perl gcc autoconf automake zlib libxml libgc ...

  5. @GeneratedValue - fancychendong的专栏 - 博客频道 - CSDN.NET

    登录|注册 收藏成功 确定 收藏失败,请重新收藏 确定 标题 标题不能为空 网址 标签 摘要 公开 取消收藏 分享资讯 传PPT/文档 提问题 写博客 传资源 创建项目 创建代码片 设置昵称编辑自我介 ...

  6. 【python】浅谈包

    python中的包可以理解为模块的集合.每个包也既可以为单包也可以有多个小包组成. Python中的package定义很简单,其层次结构与目录的层次结构相同,但是每个package必须包含一个__in ...

  7. MySQL数据库MyISAM和InnoDB存储引擎的比较

    MySQL有多种存储引擎,MyISAM和InnoDB是其中常用的两种.这里介绍关于这两种引擎的一些基本概念(非深入介绍). MyISAM是MySQL的默认存储引擎,基于传统的ISAM类型,支持全文搜索 ...

  8. erlang和go之间桥接库相关

    https://github.com/goerlang

  9. C语言每日一题之No.8

    正式面对自己第二天,突然一种强烈的要放弃的冲动,在害怕什么?害怕很难赶上步伐?害怕这样坚持到底是对还是错?估计是今天那个来了,所以身体激素有变化导致情绪起伏比较大比较神经质吧(☆＿☆)~矮油,女人每个 ...

  10. Env:VIM配置

    注:文章来自于http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim配 ...