利用JavaScript實(shí)現(xiàn)新聞滾動(dòng)效果(實(shí)例代碼)

2019-11-20 21:34:46

字體：大中小

供稿：網(wǎng)友

最近要實(shí)現(xiàn)一個(gè)滾動(dòng)新聞效果，在網(wǎng)上查了一些資料，發(fā)現(xiàn)基本的實(shí)現(xiàn)方法有兩種：

1.使用Marquee標(biāo)簽。這個(gè)標(biāo)簽的使用我已經(jīng)轉(zhuǎn)載了一篇比較詳細(xì)的文章，這個(gè)標(biāo)簽的優(yōu)點(diǎn)是便于使用，缺點(diǎn)是人們已經(jīng)逐漸不適用它了，許多瀏覽器不支持，甚至在IE8想，XHTML4.0的loose.dtd是可以的，而去掉loose.dtd卻不行。

2.使用div+javascript的方法。這種方法的好處是可以兼容幾乎所有的瀏覽器，并且在可以預(yù)料的時(shí)間內(nèi)仍能穩(wěn)定運(yùn)行。并且使用div使得網(wǎng)頁(yè)可以利用現(xiàn)有的css資源實(shí)現(xiàn)很多炫目的效果。缺點(diǎn)是需要一定的編程經(jīng)驗(yàn)和耐心。

使用javascript+div方式的基本原理是一樣的，利用scrollTop屬性和offsetheight屬性來(lái)實(shí)現(xiàn)移動(dòng)效果。一般使用兩個(gè)div，里面的內(nèi)容是一樣的，然后利用兩個(gè)div拼接，形成不斷循環(huán)的效果。下面是我找到的兩份示例代碼，第一份正是我用的代碼，可以運(yùn)行。第二份我沒做測(cè)試。寫出來(lái)是為了做個(gè)對(duì)比，第二份應(yīng)該是能用的，因?yàn)槟鞘俏覐木W(wǎng)站上摘下來(lái)的。

第一份代碼

復(fù)制代碼代碼如下:

<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; // 定義滾動(dòng)區(qū)域的高度.100
            var iFrame = 1; // 定義每幀移動(dòng)的象素.
            var iFrequency = 50; // 定義幀頻率.
            var timer; // 定義時(shí)間句柄.
            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>

第二份代碼

復(fù)制代碼代碼如下:

<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="中國(guó)自然資源學(xué)會(huì)第六次全國(guó)會(huì)員代表大會(huì)暨學(xué)術(shù)年會(huì)通知（第2號(hào)）（09.10）" target="_blank" href="moban/showCommonTopic.jsp?id=10560" mce_href="moban/showCommonTopic.jsp?id=10560">中國(guó)自然資源學(xué)會(huì)第六次全國(guó)會(huì)員代表大會(huì)暨學(xué)術(shù)年會(huì)通知（第2號(hào)）（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="“自適應(yīng)空間信息可視化理論、技術(shù)與方法”研討會(huì)征文通知（09.04）" target="_blank" href="moban/showCommonTopic.jsp?id=10557" mce_href="moban/showCommonTopic.jsp?id=10557">“自適應(yīng)空間信息可視化理論、技術(shù)與方法”研討會(huì)征文通知（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="中國(guó)科學(xué)院地理科學(xué)與資源研究所會(huì)計(jì)崗位招聘啟事（09.03）" target="_blank" href="moban/showCommonTopic.jsp?id=10556" mce_href="moban/showCommonTopic.jsp?id=10556">中國(guó)科學(xué)院地理科學(xué)與資源研究所會(huì)計(jì)崗位招聘啟事（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="水問(wèn)題論壇系列講座――2009年第7講（總第90講）（09.01）" target="_blank" href="moban/showCommonTopic.jsp?id=10554" mce_href="moban/showCommonTopic.jsp?id=10554">水問(wèn)題論壇系列講座――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'中國(guó)科學(xué)院地理信息技術(shù)自主創(chuàng)新論壇暨SuperMap GIS技術(shù)大會(huì)（09.01）" target="_blank" href="moban/showCommonTopic.jsp?id=10553" mce_href="moban/showCommonTopic.jsp?id=10553">2009'中國(guó)科學(xué)院地理信息技術(shù)自主創(chuàng)新論壇暨SuperMap GIS技術(shù)大會(huì)（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="資源與環(huán)境信息系統(tǒng)國(guó)家重點(diǎn)實(shí)驗(yàn)室2009年招聘“有限元法”方向客座研究人員（08.07）" target="_blank" href="moban/showCommonTopic.jsp?id=10532" mce_href="moban/showCommonTopic.jsp?id=10532">資源與環(huán)境信息系統(tǒng)國(guó)家重點(diǎn)實(shí)驗(yàn)室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>