利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧

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

1.使用Marquee标签。这个标签的使用我已经转载了一篇比较详细的文章，这个标签的优点是便于使用，缺点是人们已经逐渐不适用它了，许多浏览器不支持，甚至在IE8想，XHTML4.0的loose.dtd是可以的，而去掉loose.dtd却不行。

2.使用div+javascript的方法。这种方法的好处是可以兼容几乎所有的浏览器，并且在可以预料的时间内仍能稳定运行。并且使用div使得网页可以利用现有的css资源实现很多炫目的效果。缺点是需要一定的编程经验和耐心。

使用javascript+div方式的基本原理是一样的，利用scrollTop属性和offsetheight属性来实现移动效果。一般使用两个div，里面的内容是一样的，然后利用两个div拼接，形成不断循环的效果。下面是我找到的两份示例代码，第一份正是我用的代码，可以运行。第二份我没做测试。写出来是为了做个对比，第二份应该是能用的，因为那是我从网站上摘下来的。

第一份代码

复制代码 代码如下:

<div id="layer1" style="overflow-y:hidden;width:120;">
            <div id="layer2">
                <%
                ArrayList announceList = DBTools.getView("select * from sys_announce order by pubdate DESC");
                for (int i = 1; i < announceList.size() && i < 5; i++) {
                    String announceArr[] = (String[]) announceList.get(i);
                    String content = announceArr[1];
                    String date = announceArr[2].substring(announceArr[2].indexOf("-")+1, announceArr[2].indexOf(" "));
                %>
                    <table cellspacing="0" cellpadding="0" border="0" width="43">
                        <tr>
                            <td height="10"/>
                        </tr>
                    </table>
                    <table cellspacing="0" cellpadding="0" border="0" width="136">
                        <tr>
                            <td height="20" width="16" valign="top">
                                <img height="12" width="12" vspace="5" valign="top" src="images/index_18.gif" mce_src="images/index_18.gif"/>
                            </td>
                            <td width="108" style="line-height: 20px;" mce_style="line-height: 20px;">
                                <%=content%>  <%=date%>
                            </td>
                            <td></td>
                        </tr>
                    </table>
                <%
                }
                %>
            </div>
            <div id="layer3"></div>
        </div>
        <mce:script language="javascript"><!--
            var layerHeight = 100; // 定义滚动区域的高度.100
            var iFrame = 1; // 定义每帧移动的象素.
            var iFrequency = 50; // 定义帧频率.
            var timer; // 定义时间句柄.
            if(document.getElementById("layer2").offsetHeight >= layerHeight)
                document.getElementById("layer1").style.height = layerHeight;
            else
                document.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight;
            document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML;
            // alert(document.getElementById("layer2").innerHTML);
            function move(){
                if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){
                    document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);
                }
                else {
                    document.getElementById("layer1").scrollTop += iFrame;
                }
            }
            timer = setInterval("move()",iFrequency);
            document.getElementById("layer1").onmouseover=function() {clearInterval(timer);}
            document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}

// --></mce:script>

第二份代码

复制代码 代码如下:

 <SCRIPT language="JavaScript">
            var strArray=new Array();
            strArray[1]=''
                +'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="中国自然资源学会第六次全国会员代表大会暨学术年会通知（第2号）（09.10）" target="_blank" href="moban/showCommonTopic.jsp?id=10560" mce_href="moban/showCommonTopic.jsp?id=10560">中国自然资源学会第六次全国会员代表大会暨学术年会通知（第2号）（09.10）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
                +'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="“自适应空间信息可视化理论、技术与方法”研讨会征文通知（09.04）" target="_blank" href="moban/showCommonTopic.jsp?id=10557" mce_href="moban/showCommonTopic.jsp?id=10557">“自适应空间信息可视化理论、技术与方法”研讨会征文通知（09.04）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
                +'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="中国科学院地理科学与资源研究所会计岗位招聘启事（09.03）" target="_blank" href="moban/showCommonTopic.jsp?id=10556" mce_href="moban/showCommonTopic.jsp?id=10556">中国科学院地理科学与资源研究所会计岗位招聘启事（09.03）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'

            strArray[0]=''
                +'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="水问题论坛系列讲座——2009年第7讲（总第90讲）（09.01）" target="_blank" href="moban/showCommonTopic.jsp?id=10554" mce_href="moban/showCommonTopic.jsp?id=10554">水问题论坛系列讲座——2009年第7讲（总第90讲）（09.01）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
                +'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="2009'中国科学院地理信息技术自主创新论坛暨SuperMap GIS技术大会（09.01）" target="_blank" href="moban/showCommonTopic.jsp?id=10553" mce_href="moban/showCommonTopic.jsp?id=10553">2009'中国科学院地理信息技术自主创新论坛暨SuperMap GIS技术大会（09.01）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
                +'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="资源与环境信息系统国家重点实验室2009年招聘“有限元法”方向客座研究人员（08.07）" target="_blank" href="moban/showCommonTopic.jsp?id=10532" mce_href="moban/showCommonTopic.jsp?id=10532">资源与环境信息系统国家重点实验室2009年招聘“有限元法”方向客座研究人员（08.07）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>'
        /*
            showId=Math.floor(Math.random()*1);
            tempStr=strArray[showId];
            strArray[showId]=strArray[0];
            strArray[0]=tempStr;
            */
        </SCRIPT>
        <SCRIPT>
            var timer;

            document.write('<div id="icefable1" style="width:136;">'
                +'<table width=130; border=0 cellspacing=0 cellpadding=0>'
                +'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[1]+'</td></tr>'
                +'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[0]+'</td></tr>'
                +'</table>'
                +'</div>'
                +'<div id="icefable2" style="position:absolute;visibility:hidden" mce_style="position:absolute;visibility:hidden"></div>');
            /*
            var marqueesHeight=132;
            var stopscroll=false;
            icefable1.scrollTop=0;
            */
            with(icefable1){
                /*
                style.width=0;
                style.height=marqueesHeight;
                style.overflowX="visible";
                style.overflowY="hidden";
                noWrap=true;
                */
                onmouseover=function(){clearInterval(timer);};
                onmouseout=function(){timer = setInterval("move()",100);};
            }
            /*
            var preTop=0;
            var currentTop=0;
            var stoptime=0;
             */
            function init_srolltext(){
                icefable2.innerHTML="";
                icefable2.innerHTML+=icefable1.innerHTML;
                icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
                timer = setInterval("move()",100);
            }
            function move(){
                 if(document.getElementById("icefable2").scrollTop >= document.getElementById("icefable1").offsetHeight)
                     document.getElementById("icefable2").scrollTop -= (document.getElementById("icefable1").offsetHeight - 1);
                 else
                     ocument.getElementById("icefable2").scrollTop += 1;
            }
            init_srolltext();

            function scrollUp(){
                if(stopscroll==true) return;
                currentTop+=4;
                if(currentTop==132)
                {
                    stoptime+=4;
                    currentTop-=0;
                }
                else {
                    preTop=icefable1.scrollTop;
                    icefable1.scrollTop+=4;
                    if(preTop==icefable1.scrollTop){
                        icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;
                        icefable1.scrollTop+=4;
                    }
                }
            }
            //setTimeout("init_srolltext()",2000);
            //init_srolltext();
        </SCRIPT>

时间： 2024-02-19 08:13:03

利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧的相关文章

JS小功能(offsetLeft实现图片滚动效果)实例代码_javascript技巧

效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #div1        {            width: 245px;            height: 150px;            background: red;            margin: 250p

js图片向右一张张滚动效果实例代码_javascript技巧

先来张效果图 样式 复制代码 代码如下:         #div_left{float:left;width:60px;height:86px;}        #starScroll{width:843px;height:188px;margin-left:15px;margin-right:15px;padding-top:9px;overflow:hidden;border:1px solid red;float:left;}        #starScroll #contentScr

JavaScript:Div层拖动效果实例代码_javascript技巧

Div层拖动效果图: 实现:CSS: 复制代码 代码如下: <style>div{position:relative;}</style> JS: 复制代码 代码如下: <script type="text/javascript"> var mouseover=truevar xcoor;var ycoor;function coordinates(){ if (event.srcElement.id.indexOf("wishbroad&q

javascript 通用loading动画效果实例代码_javascript技巧

由于项目中多处要给ajax提交的时候增加等待动画效果,所以就写了一个简单的通用js方法:代码如下: 复制代码 代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); //wraperid : 显示loding图片的容器元素//ms:表示loding图标显示的时长,毫秒//envent:表示出发事件的事件源对象,用于获得出发事件的对象//callback:表示动画结束后执行的回掉方法//stop()方法表示在回掉方法执行成功后执行的隐藏动画的操

js实现单行文本向上滚动效果实例代码_javascript技巧

复制代码 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, autoStart) {    this.Delay = 10;    this.LineHeight = 20;    this.Amount = 1;     this.Direction = "up";    this.Timeout = 1500;    this.Scrol

原生JS实现的放大镜效果实例代码_javascript技巧

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style

JavaScript简单下拉菜单实例代码_javascript技巧

本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最高支持两级,网上常见到的一种菜单风格,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-xlcd-down-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

javascript合并表格单元格实例代码_javascript技巧

本文为大家介绍了一段来源于网络上的代码实例,能够合并单元格,下面和大家分享一下,希望能够给需要的朋友或多或少带来一定的帮助. 代码实例如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>表格单元格合并代码</title> <script type="text/javascript"> function au

javascript新闻跑马灯实例代码_javascript技巧

本文实例为大家分享了javascript实现的跑马灯效果代码,实现了新闻公告之类的功能,下面提供了一段跑马灯实例供大家参考之用,希望能够对需要的朋友有所帮助. 运行效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>javascript新闻跑马灯效果</title> </head> <script ty