歡迎光臨郝學武的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

          主站蜘蛛池模板: 黄龙县| 凤阳县| 黄石市| 拉孜县| 阜平县| 北安市| 龙游县| 乡宁县| 额敏县| 广河县| 平远县| 石嘴山市| 基隆市| 乌什县| 雅江县| 呼玛县| 巴彦县| 桂平市| 凉城县| 巴南区| 弥渡县| 黄浦区| 扶余县| 荥阳市| 平昌县| 城固县| 河西区| 台北县| 房产| 荃湾区| 杭州市| 灵璧县| 诸城市| 泗阳县| 逊克县| 昌图县| 辛集市| 南部县| 慈溪市| 黔南| 阳春市|