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


Posted in Javascript onNovember 27, 2013

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

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>
Javascript 相关文章推荐
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 #Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 #Javascript
js替代copy(示例代码)
Nov 27 #Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 #Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 #Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 #Javascript
JS、CSS加载中的小问题探讨
Nov 26 #Javascript
You might like
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
php如何获取文件的扩展名
2015/10/28 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
深入理解Javascript中的this关键字
2015/03/27 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
python批量解压zip文件的方法
2019/08/20 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
Python的两道面试题
2013/06/29 面试题
英语系本科生求职信范文
2013/12/18 职场文书
小区门卫管理制度
2014/01/29 职场文书
企业宣传标语
2014/06/09 职场文书
学校火灾防控方案
2014/06/09 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
整脏治乱工作简报
2015/07/21 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
田径运动会广播稿
2015/08/19 职场文书
人事任命书范本
2015/09/21 职场文书
执行力心得体会范文
2016/01/11 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL