Heim  >  Artikel  >  Web-Frontend  >  利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 17:12:241154Durchsuche

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

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(" "));
                %>
                   
                       
                           
                       
                   

                   
                       
                           
                           
                           
                       
                   

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

                                 
                           

                                }
                %>
           

           

       

       

第二份代码
复制代码 代码如下:

 
        <script><BR> var timer;<br><br> document.write('<div id="icefable1" style="width:136;">'<BR> +'<table width=130; border=0 cellspacing=0 cellpadding=0>'<BR> +'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[1]+''<BR> +'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[0]+''<BR> +''<BR> +'</script>
'
                +'');
            /*
            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();
       
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn