js实现新闻滚动-单行滚动或者多行滚动
注明：都是轉載。
先說單行滾動：
--------直接復制以下代碼即可試驗 轉載http://www.3lian.com/edu/2011/06-30/4986.html-----------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>網頁特效-文本特效-非常不錯的逐行新聞滾動效果</title>
<FCK:meta http-equiv="content-type" content="text/html;charset=gb2312" />
<!--把下面代碼加到<head>與</head>之間-->
<style type="text/css">
a{
display:block;
font-size:12px;
line-height:18px;
text-decoration:none;
color:#333;
font-family:Arial;
}
.shell{
background:url(/effectimages/xml.gif) no-repeat 4px 5px;
border:1px solid #aaa;
width:400px;
padding:3px 2px 2px 20px;
}
#div1{
height:18px;
overflow:hidden;
}
</style>
</head>
<body>
<!--把下面代碼加到<body>與</body>之間-->
<div class="shell">
<div id="div1">
<a href="javascript:" _fcksavedurl="javascript:">請教高手幫我看下這段代碼：FLASH顯示不了</a>
<a href="javascript:" _fcksavedurl="javascript:">請教在UTF-8編輯下的符號顯示問題</a>
<a href="javascript:" _fcksavedurl="javascript:">jquery做的一個滑動效果，不知如何增加延遲，現在太靈敏了</a>
<a href="javascript:" _fcksavedurl="javascript:">技術研究：QQ2009版按鈕漸顯漸隱的由來</a>
<a href="javascript:" _fcksavedurl="javascript:">Javascript讀取Json數據并分頁顯示，支持鍵盤和滾輪翻頁</a>
<a href="javascript:" _fcksavedurl="javascript:">奇怪的PNG文件，拜師以求解惑</a>
<a href="javascript:" _fcksavedurl="javascript:">更新lhgdialog-ver2.0.1彈出窗口組件</a>
</div>
</div>
<script language="javascript">
var box=document.getElementById("div1"),can=true;
box.innerHTML+=box.innerHTML;
box.οnmοuseοver=function(){can=false};
box.οnmοuseοut=function(){can=true};
new function (){
var stop=box.scrollTop%18==0&&!can;
if(!stop)box.scrollTop==parseInt(box.scrollHeight/2)?box.scrollTop=0:box.scrollTop++;
setTimeout(arguments.callee,box.scrollTop%18?10:1500);
};
</script>
</body>
</html>
--------------------------------------------
?
------------多行滾動，復制一下代碼即可實現----------------------------
轉載http://www.cnblogs.com/dearxinli/p/3770803.html
-----------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
.inform {
??? border: 1px solid #E5E5E5;
??? padding: 1px;
}
.inform h2 {
??? background: none repeat scroll 0 0 #015198;
??? font-weight: normal;
??? line-height: 30px;
}
.inform h2 span {
??? color: #FFFFFF;
??? font-size: 16px;
??? padding-left: 10px;
}
.inform h2 a {
??? color: #FFFFFF;
??? float: right;
??? font-size: 14px;
??? padding-right: 3px;
}
.inform ul {
??? height: 170px;
??? margin-top: 7px;
??? overflow: hidden;
}
.inform ul li {
??? line-height: 26px;
??? padding-left: 12px;
}
</style>
</head>
<body>
<div class="inform">
? <div style="height:170px; overflow:hidden">
?? ?<ul id="marquee" style="height:285px">
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<li><a title="添加時間：2014-06-05 點擊次數：139" href="/index.php?r=archives/default/new&id=6044&t=1401953184" target="_blank">
?? ??? ?華醫學會臨床醫學科研專項資金...</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a title="添加時間：2014-06-05 點擊次數：192" href="/index.php?r=archives/default/new&id=6043&t=1401953184" target="_blank">
?? ??? ?第四屆職工文化藝術節活動方案</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a title="添加時間：2014-06-04 點擊次數：154" href="/index.php?r=archives/default/new&id=6040&t=1401953184" target="_blank">
?? ??? ?關于開展國家技術標準資源服務...</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a title="添加時間：2014-06-04 點擊次數：145" href="/index.php?r=archives/default/new&id=6038&t=1401953184" target="_blank">
?? ??? ?科技部關于組織申報科技基礎性...</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a title="添加時間：2014-06-03 點擊次數：203" href="/index.php?r=archives/default/new&id=6032&t=1401953184" target="_blank">
?? ??? ?關于印發《國家自然科學基金優...</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a title="添加時間：2014-06-03 點擊次數：89" href="/index.php?r=archives/default/new&id=6031&t=1401953184" target="_blank">
?? ??? ?UpToDate數據庫培訓講座</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a title="添加時間：2014-05-29 點擊次數：288" href="/index.php?r=archives/default/new&id=6015&t=1401953184" target="_blank">
?? ??? ?手衛生工作簡訊</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a title="添加時間：2014-05-26 點擊次數：675" href="/index.php?r=archives/default/new&id=5831&t=1401953184" target="_blank">
?? ??? ?2014年“端午節”門急診醫...</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a title="添加時間：2014-05-21 點擊次數：736" href="/index.php?r=archives/default/new&id=5671&t=1401953184" target="_blank">
?? ??? ?國家自然科學基金委員會關于受...</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a title="添加時間：2014-05-21 點擊次數：622" href="/index.php?r=archives/default/new&id=5669&t=1401953184" target="_blank">
?? ??? ?UpToDate數據庫試用通知</a></li>
?? ??
?? ??? ?<li> </li> ?
?? ?</ul>
?? </div>
?? ??? ??? ??? ??? ?
<script type="text/javascript">
window.onload = function() { ?
??? setTimeout("startmarquee(34, 50, 0, 'marquee')", 1000); ?
}
function startmarquee(lh,speed,delay,id) { ?
??? var t; ?
??? var p = false; ?
??? var o = document.getElementById(id); ?
??? o.innerHTML += o.innerHTML + o.innerHTML + o.innerHTML; ?
??? o.onmouseover = function() { ?
??????? p = true; ?
??? } ?
??? o.onmouseout = function() { ?
??????? p = false; ?
??? } ?
??? o.scrollTop = 0; ?
??
??? function start() { ?
??????? t = setInterval(scrolling,speed); ?
??????? if(!p) o.scrollTop += 2; ?
??? } ?
??
??? function scrolling() { ?
??????? if(o.scrollTop%lh != 0) { ?
??????????? o.scrollTop += 2; ?
??????????? if(o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0; ?
??????? } else { ?
??????????? clearInterval(t); ?
??????????? setTimeout(start,delay); ?
??????? } ?
??? } ?
??? setTimeout(start,delay); ?
}?
</script>
</div>
</body>
</html>
-----------------------------
轉載于:https://www.cnblogs.com/aji2014/p/5426369.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的js实现新闻滚动-单行滚动或者多行滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 监听iPhone的通话状态之---Cor
- 下一篇： mybatis3.2.3+spring整