利用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 相关文章推荐
动态添加option及createElement使用示例
Jan 26 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
JavaScript实现拖动对话框效果的实现代码
Oct 12 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
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
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
详解PHP中的Traits
2015/07/29 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
js常用排序实现代码
2010/12/28 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
js星星评分效果
2014/07/24 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python实现爬山算法的思路详解
2019/04/09 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
幼儿师范毕业生自荐信
2013/11/09 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
财务部经理岗位职责
2014/02/03 职场文书
创新型城市实施方案
2014/03/06 职场文书
党小组推荐意见
2015/06/02 职场文书
暖春观后感
2015/06/08 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技