利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧
程序员文章站
2024-01-08 17:55:40
...
最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种:
ArrayList announceList = DBTools.getView("select * from sys_announce order by pubdate DESC");
for (int i = 1; i String announceArr[] = (String[]) announceList.get(i);
String content = announceArr[1];
String date = announceArr[2].substring(announceArr[2].indexOf("-")+1, announceArr[2].indexOf(" "));
%>
}
%>
第二份代码
'
+'');
/*
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();
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 String announceArr[] = (String[]) announceList.get(i);
String content = announceArr[1];
String date = announceArr[2].substring(announceArr[2].indexOf("-")+1, announceArr[2].indexOf(" "));
%>
|
|
}
%>
第二份代码
复制代码 代码如下:
+'');
/*
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();
推荐阅读
-
利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧
-
js实现收缩菜单效果实例代码_javascript技巧
-
实现动画效果核心方式的js代码_javascript技巧
-
javascript 简单抽屉效果的实现代码_javascript技巧
-
javascript中利用数组实现的循环队列代码_javascript技巧
-
原生javascript实现图片轮播效果代码_javascript技巧
-
jQuery实现可收缩展开的级联菜单实例代码_javascript技巧
-
js仿百度有啊通栏展示效果实现代码_javascript技巧
-
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)_javascript技巧
-
使用原生javascript实现分页效果的代码实例