最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种:
1.使用Marquee标签。这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了,许多浏览器不支持,甚至在IE8想,XHTML4.0的loose.dtd是可以的,而去掉loose.dtd却不行。
2.使用div+javascript的方法。这种方法的好处是可以兼容几乎所有的浏览器,并且在可以预料的时间内仍能稳定运行。并且使用div使得网页可以利用现有的css资源实现很多炫目的效果。缺点是需要一定的编程经验和耐心。
使用javascript+div方式的基本原理是一样的,利用scrollTop属性和offsetheight属性来实现移动效果。一般使用两个div,里面的内容是一样的,然后利用两个div拼接,形成不断循环的效果。下面是我找到的两份示例代码,第一份正是我用的代码,可以运行。第二份我没做测试。写出来是为了做个对比,第二份应该是能用的,因为那是我从网站上摘下来的。
第一份代码
复制代码代码如下:
<%
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(" "));
%>
| <%=content%> <%=date%> |
<%
}
%>
第二份代码
复制代码代码如下:
var strArray=new Array();
strArray[1]=''
+'
| 中国自然资源学会第六次全国会员代表大会暨学术年会通知(第2号)(09.10) |
+'
| “自适应空间信息可视化理论、技术与方法”研讨会征文通知(09.04) |
+'
| 中国科学院地理科学与资源研究所会计岗位招聘启事(09.03) |
strArray[0]=''
+'
| 水问题论坛系列讲座――2009年第7讲(总第90讲)(09.01) |
+'
| 2009'中国科学院地理信息技术自主创新论坛暨SuperMap GIS技术大会(09.01) |
+'
| 资源与环境信息系统国家重点实验室2009年招聘“有限元法”方向客座研究人员(08.07) |
/*
showId=Math.floor(Math.random()*1);
tempStr=strArray[showId];
strArray[showId]=strArray[0];
strArray[0]=tempStr;
*/
var timer;
document.write('
+'
| '+strArray[1]+' |
| '+strArray[0]+' |
+'
+'
');/*
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();
