网页单行滚动代码，带停顿

2009年6月25日

<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
html,body{
text-align:center;
font:16px/24px Verdana, Arial, Helvetica, sans-serif;
}
a{
color:#333;
text-decoration:none;
}
a:hover{
color:#f00;
}
#container{
width:520px;
height:24px;
padding:0 10px;
border:1px solid #7991C8;
overflow:hidden;
margin:50px auto;
}
#scroll{
list-style-type:disc;
list-style-position:inside;
text-align:left;
}
#scroll li{
height:24px;
line-height:24px;
}
#scroll li a{
width:100%;
}
-->
</style>
</head>
<body>
<div id="container">
<ul id="scroll">
<li><a href="#">愛情是一棵洋蔥頭，你一片片剝下去，總有讓你流淚的時候；</a></li>
<li><a href="#">愛情是感冒，被愛情病毒感染的人，既瞞不了自己，也瞞不了別人。</a></li>
<li><a href="#">長相思，曉月寒，晚風寒，情人佳節獨往還，顧影自淒然;</a></li>
<li><a href="#">見亦難，思亦難，長夜漫漫抱恨眠，問伊憐不憐。</a></li>
<li><a href="#">男人戀愛是情份，女人戀愛是本份;</a></li>
<li><a href="#">男人花心是天份，女人花心是沒名沒份。</a></li>
<li><a href="#">到了北京，知道自己官小；到了東北，知道自己膽小；</a></li>
<li><a href="#">到了上海，知道自己穿得不好；到了深圳，知道自己錢少。</a></li>
</ul>
</div>
<script type="text/javascript">
//<![CDATA[
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!="function"){
window.onload=window.setTimeout(func,2000);
}
else{
window.onload=function(){
window.setTimeout(oldonload,2000);
window.setTimeout(func,2000);
}
}
}
var stopscroll = false;
var preTop = 0;
var currentTop = 0;
var stoptime = 0;
var leftElem = document.getElementById("scroll");
var scrollElem = document.getElementById("container");
scrollElem.onmouseover=function(){
  stopscroll = true;
};
scrollElem.onmouseout=function(){
  stopscroll = false;
};
scrollElem.appendChild(leftElem.cloneNode(true));
addLoadEvent(init_scrolltext);
function init_scrolltext(){
  scrollElem.scrollTop = 0;
  setInterval('scrollUp()',10);     //值越小，滚动越快
}
function scrollUp(){
  if(stopscroll) return;
  currentTop += 1;    //设为1为间歇式的滚动，设为2则是连续滚动
  if(currentTop == 25) {         //值由line-height决定
    stoptime += 1;
    currentTop -= 1;
    if(stoptime == 200) {    //值由间隔时间决定
      currentTop = 0;
      stoptime = 0;
    }
  }else{
    preTop = scrollElem.scrollTop;
    scrollElem.scrollTop += 1;
    if(preTop == scrollElem.scrollTop){
      scrollElem.scrollTop = 0;
      scrollElem.scrollTop += 1;
    }
  }
}
//]]>
</script>     <!--   JS代码需在相应HTML代码之后   -->
阳光雨露

网页单行滚动代码，带停顿

0 回复,0 引用: 网页单行滚动代码，带停顿

添加回复

最新文章

最新回复

最近引用

分类导览

按月存档
