歡迎光臨郝學武的blog。

          javascript滾動新聞代碼

          Posted on 2007-11-21 12:19 陜西BOY 閱讀(9131) 評論(9)  編輯  收藏

          我在這里列出兩種滾動模式:大家可以將代碼拷貝到本機,建立一個html文件,直接運行就可以了。
          1:一個一個的循環上移

          <style>a{display:block;font-size:15px};</style>
          <div id="div1" style="width:300px;height:68px;overflow:hidden">
          <a href="javascript:">1,我要賺錢,</a>
          <a href="javascript:">2,我要生活 </a>
          <a href="javascript:">3,我要買房,</a>
          <a href="javascript:">4,我要一切</a>
          <a href="javascript:">5,男人就要對自己狠點</a>
          </div>
          <script>
          var t=setInterval(myfunc,1000)
          var d=document.getElementById("div1")
          function myfunc(){
          var o=d.firstChild
          d.removeChild(o)
          d.appendChild(o)
          }
          d.onmouseover=function(){clearInterval(t)}
          d.onmouseout=function(){t=setInterval(myfunc,1000)}
          </script>


          2:整體循環上移

          <div id="marquees">
             <a href="#">新聞一</a><br>
             <br>
             <a href="#">新聞二</a><br>
             <br>
             <a href="#">新聞三</a><br>
             <br>
             <a href="#">新聞四</a><br>
             <br>
          </div>
          <script language="JavaScript">

          marqueesHeight=200;
          stopscroll=false;

          with(marquees){
             style.width=0;
             style.height=marqueesHeight;
             style.overflowX="visible";
             style.overflowY="hidden";
             noWrap=true;
             onmouseover=new Function("stopscroll=true");
             onmouseout=new Function("stopscroll=false");
          }
          document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');

          preTop=0; currentTop=0;

          function init(){
             templayer.innerHTML="";
             while(templayer.offsetHeight<marqueesHeight){
               templayer.innerHTML+=marquees.innerHTML;
             }
             marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
             setInterval("scrollUp()",30);
          }
          document.body.onload=init;

          function scrollUp(){
             if(stopscroll==true) return;
             preTop=marquees.scrollTop;
             marquees.scrollTop+=1;
             if(preTop==marquees.scrollTop){
               marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
               marquees.scrollTop+=1;
             }
          }
          </script>

          Feedback

          # re: javascript滾動新聞代碼[未登錄]  回復  更多評論   

          2007-12-21 15:15 by 哈哈
          很好
          正是我需要的
          謝謝樓主

          # re: javascript滾動新聞代碼  回復  更多評論   

          2008-01-17 10:58 by fpplzw
          正是我需要的
          謝謝樓主

          # re: javascript滾動新聞代碼[未登錄]  回復  更多評論   

          2008-05-17 19:35 by aa
          謝謝,

          # re: javascript滾動新聞代碼  回復  更多評論   

          2008-10-16 16:44 by liang
          謝謝,我用了,很好.

          # re: javascript滾動新聞代碼  回復  更多評論   

          2009-11-22 00:42 by 放大
          太好了 正需要 謝謝了

          # re: javascript滾動新聞代碼  回復  更多評論   

          2010-06-21 14:23 by 網友
          感謝

          # re: javascript滾動新聞代碼  回復  更多評論   

          2010-08-13 10:40 by 畫畫公子
          怎么不能兼容Firefox?

          # re: javascript滾動新聞代碼[未登錄]  回復  更多評論   

          2011-07-06 15:23 by wolf
          代碼不錯,但是不兼容火狐,這是最大的缺陷!

          # re: javascript滾動新聞代碼  回復  更多評論   

          2011-10-24 16:22 by jiaju
          如果要求 內容少的時候不滾動怎么辦?

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           

          posts - 17, comments - 65, trackbacks - 0, articles - 28

          Copyright © 陜西BOY

          主站蜘蛛池模板: 福清市| 通榆县| 昌都县| 温宿县| 当涂县| 保山市| 定日县| 渭源县| 绵阳市| 诏安县| 海宁市| 容城县| 安溪县| 蛟河市| 甘泉县| 年辖:市辖区| 天祝| 勐海县| 宁津县| 澄城县| 奉贤区| 临洮县| 宁化县| 峨眉山市| 北川| 松原市| 宁海县| 泸溪县| 北碚区| 石河子市| 藁城市| 德惠市| 柳林县| 静乐县| 元氏县| 嵩明县| 凤冈县| 天门市| 内江市| 东阳市| 北川|