当前位置:编程学习 > JS >>

不断滚动的新闻代码

<style>
.dhMarquee {width:100px;height:108px;text-align:left;margin:0px;padding:0px;border:1px solid #000;overflow:hidden;white-space:nowrap;} 
.mqdemo {margin:0px;padding:0px;border:0px;}
.dhScrollA {font-size:12px;display:block;padding:2px;}
</style> 
<div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1">
<div id="mqdemo" class="mqdemo">
<a class="dhScrollA" href="javascript:alert('1')">月圆之夜1</a>
<a class="dhScrollA" href="javascript:alert('2')">紫禁之颠2</a>
<a class="dhScrollA" href="javascript:alert('3')">西门吹雪3</a>
<a class="dhScrollA" href="javascript:alert('4')">天外飞仙4</a>
<a class="dhScrollA" href="javascript:alert('5')">太阳之夜5</a>
<a class="dhScrollA" href="javascript:alert('6')">紫禁之谷6</a>
<a class="dhScrollA" href="javascript:alert('7')">西门吹风7</a>
<a class="dhScrollA" href="javascript:alert('8')">天外飞碟8</a>
<a class="dhScrollA" href="javascript:alert('1')">月圆之夜9</a>
<a class="dhScrollA" href="javascript:alert('2')">紫禁之颠10</a>
<a class="dhScrollA" href="javascript:alert('3')">西门吹雪11</a>
<a class="dhScrollA" href="javascript:alert('4')">天外飞仙12</a>
<a class="dhScrollA" href="javascript:alert('5')">太阳之夜13</a>
<a class="dhScrollA" href="javascript:alert('6')">紫禁之谷14</a>
<a class="dhScrollA" href="javascript:alert('7')">西门吹风15</a>
<a class="dhScrollA" href="javascript:alert('8')">天外飞碟16</a>
</div>
</div>
<script language="javascript"> 
var speed = 30; 
//滚动对象 
var oMarquee = document.getElementById("mq");
//内容对象 
var omqdemo = document.getElementById("mqdemo");
var h = oMarquee.offsetHeight;
var odl = omqdemo.offsetHeight;
var x = parseInt(h/odl)+1;
for(var i=0;i<x;i++){
var o = omqdemo.cloneNode(true);
oMarquee.appendChild(o);
}
var iScrollAmount = 1
var myMar;
function scroll(){
oMarquee.scrollTop += iScrollAmount;
var ol = oMarquee.scrollTop;
if(odl-ol<=0){
window.clearTimeout(myMar);
oMarquee.scrollTop = 0;
}else{
if(ol%h!=0){
myMar = window.setTimeout(scroll,speed);
}else{
window.clearTimeout(myMar);
}
}
}
var t = 6000;
function clipShow(){
scroll();
window.setTimeout(clipShow,t);
}
window.setTimeout(clipShow,t);
</script>
补充:网页制作,js教程 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,