js 滚动

<style>
div { font-size:12px; }
</style>
<div id="mq" style="width:100%;height:70px;overflow:hidden">
  轻轻的我走了,正如我轻轻的来;<br/>
  我轻轻的招手,作别西天的云彩。<br/>
  <br/>
  那河畔的金柳,是夕阳中的新娘;<br/>
  波光里的艳影,在我心头荡漾。<br/>
  <br/>
  软泥上的青荇,油油的在水底招摇;<br/>
  在康河的柔波里,我甘心作一条水草。<br/>
  <br/>
  那榆荫下的一潭,不是清泉是天上的虹;<br/>
  揉碎在浮藻间,沉淀彩虹似的梦。<br/>
  <br/>
  寻梦,撑支长篙,向青草更青处漫溯;<br/>
  满载一船星辉,在星辉斑烂里放歌。<br/>
  <br/>
  但我不能放歌,悄悄是别离的笙箫;<br/>
  夏虫也为我沉默,沉默是今晚的康桥。<br/>
  <br/>
  悄悄的我走了,正如我悄悄的来;<br/>
  我挥一挥衣袖,不带走一片云彩。<br/>
  <br/>
</div>
<script>
var oMarquee = document.getElementById("mq"); //滚动对象
var iLineHeight = 42; //单行高度,像素
var iLineCount = 7; //实际行数
var iScrollAmount = 1; //每次滚动高度,像素
function run() {
oMarquee.scrollTop += iScrollAmount;
if ( oMarquee.scrollTop == iLineCount * iLineHeight )
oMarquee.scrollTop = 0;
if ( oMarquee.scrollTop % iLineHeight == 0 ) {
window.setTimeout( "run()", 2000 );
} else {
window.setTimeout( "run()", 50 );
}
}
oMarquee.innerHTML += oMarquee.innerHTML;
window.setTimeout( "run()", 2000 );
</script>

 

<style type="text/css">
<!--
body {
text-align:center;
}
ul{
margin:0px;
padding:0px;
list-style:none;
}

#andyscroll {
overflow: hidden;
background: #E8F8F8;
padding: 0 10px;
text-align: left;
width:400px;
height:100px;
overflow:hidden;
}
#andyscroll a {
font:12px/18px tahoma;
color: #000; 
float:left;
width:100%;
text-decoration: none;
display:block;
}
#andyscroll a:hover {
font:12px/18px tahoma;
color: #F60;
}
-->
</style>

<div id="andyscroll">
<div id="scrollmessage">
<UL><li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>
<li><a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a></li>
<li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>
<li><a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a></li>
<li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>
<li><a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a></li>
<li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>
<li><a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a></li>
<li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>
<li><a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a></li>
<li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>
<li><a href="#">代码来自互联网,我只不过稍加整理,希望大家多提意件……</a></li>
</ul>
</div>
</div>


<script type="text/javascript">
<!--
var stopscroll = false;
var scrollElem = document.getElementById("andyscroll");
var marqueesHeight = scrollElem.style.height;
scrollElem.onmouseover = new Function('stopscroll = true');
scrollElem.onmouseout = new Function('stopscroll = false');
var preTop = 0;
var currentTop = 0;
var stoptime = 0;
var leftElem = document.getElementById("scrollmessage"); 
scrollElem.appendChild(leftElem.cloneNode(true));
init_srolltext();
function init_srolltext(){
scrollElem.scrollTop = 0;
setInterval('scrollUp()', 25);//的面的这个参数25, 是确定滚动速度的, 数值越小, 速度越快
}
function scrollUp(){
if(stopscroll) return;
currentTop += 2; //设为1, 可以实现间歇式的滚动; 设为2, 则是连续滚动
if(currentTop == 19) {
   stoptime += 1;
   currentTop -= 1;
   if(stoptime == 180) {
    currentTop = 0;
    stoptime = 0;
   }
}else{
   preTop = scrollElem.scrollTop;
   scrollElem.scrollTop += 1;
   if(preTop == scrollElem.scrollTop){
    scrollElem.scrollTop = 0;
    scrollElem.scrollTop += 1;
   }
}
}
</script>
//-->

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值