javaScript滾動新聞，滾動新聞
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>滾動新聞</title></head><style type="text/css">#div1{width:200px;height:80px; background-color:#CCC; position:absolute; left:0px; top:0px; z-index:1;overflow:hidden;}#imgs{width:100px; height:400px; background-color:#9C9; position:absolute; left:200px; top:0px; z-index:1;//垂直方向置於最頂層overflow:hidden;//超出部分隱藏}</style><body><!--div 的高度設定比實際需要的高度小--><div id="div1"> <ul id="news"> <li><a href="#">aaaaaaaaaaaaaaa</a></li> <li><a href="#">bbbbbbbbbbbbbbb</a></li> <li><a href="#">ccccccccccccccc</a></li> <li><a href="#">ddddddddddddddd</a></li> <li><a href="#">eeeeeeeeeeeeeee</a></li> <li><a href="#">fffffffffffffff</a></li> <li><a href="#">ggggggggggggggg</a></li> </ul> </div> <div id="imgs"> <img src="imgs/11.png"></img> <img src="imgs/22.png"></img> <img src="imgs/33.png"></img> <img src="imgs/44.png"></img> <img src="imgs/55.png"></img> </div></body></html><script type="text/javascript" language="javascript">//注意需要讓當前的dom載入完全之後，再執行js代碼//文字滾動news = document.getElementById('news');function newScroll(node){var t = node.firstChild;node.removeChild(t);node.appendChild(t);}id = setInterval('newScroll(news)',400);news.onmouseover = function(){clearTimeout(id);}news.onmouseout = function(){id = window.setInterval('newScroll(news)',400);}//圖片滾動imgs = document.getElementById('imgs');id1 = setInterval('newScroll(imgs)',400);imgs.onmouseover = function(){clearTimeout(id1);}imgs.onmouseout = function(){id1 = window.setInterval('newScroll(imgs)',400);}</script>
還是用marquee簡單
<marquee scrollamount='2' scrolldelay='220' direction= 'left' width='148' id=xx height='20' onmouseover=this.stop() onmouseout=this.start()>
aaaaaaaaaaaaaaaaa bbbbbbbbbbbbbb
</marquee>
一段對於新聞逐行滾動的JavaScript代碼問題
上控製版面上找
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
