利用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 相关文章推荐
JavaScript null和undefined区别分析
Oct 14 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
js实现点击烟花特效
Oct 14 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
推荐文章系统(一)
2006/10/09 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
利用Python实现图书超期提醒
2016/08/02 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
Python多线程thread及模块使用实例
2020/04/28 Python
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
技术总监的工作职责
2013/11/13 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP