码迷,mamicode.com
首页 > 其他好文 > 详细

div 无缝滚动

时间:2015-09-08 09:32:37      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title></title>

<style type="text/css">
BODY {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px;  PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: #333333; PADDING-TOP: 0px; FONT-FAMILY: "宋体"; TEXT-ALIGN: center
}
* {
    BACKGROUND-IMAGE: none;  background-color:#FAFBF5
}
#scrollWrap {
    OVERFLOW: hidden; BORDER-LEFT-STYLE: none; HEIGHT: 25px
}
#scrollMsg {
    PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 680px; PADDING-TOP: 0px; TEXT-ALIGN: left
}
#scrollMsg UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;float:left
}
#scrollMsg LI {
    LINE-HEIGHT: 25px; LIST-STYLE-TYPE: none
}
</style>

</head>
<body>
<div id="scrollWrap">
<div id="scrollMsg">
<ul>
  <li><font color="#069138">《三字经》</font>&nbsp;&nbsp;人之初  性本善  性相近  习相远  苟不教  性乃迁
  <font color="#ff0000">《三字经》</font>
  </li>
  <li><font color="#069138">《三字经》</font>&nbsp;&nbsp;教之道  贵以专  昔孟母  择邻处  子不学  断机杼
  <font color="#ff0000">《三字经》</font>
  </li>
  <li><font color="#069138">《三字经》</font>&nbsp;&nbsp;窦燕山  有义方  教五子  名俱扬  养不教  父之过
  <font color="#ff0000">《三字经》</font>
  </li>
  <li><font color="#069138">《三字经》</font>&nbsp;&nbsp;教不严  师之惰  子不学  非所宜  幼不学  老何为
  <font color="#ff0000">《三字经》</font>
  </li>
  <li><font color="#069138">《三字经》</font>&nbsp;&nbsp;玉不琢  不成器  人不学  不知义  为人子  方少时
  <font color="#ff0000">《三字经》</font>
  </li>
 </ul></div>
  </div>
<script type="text/javascript"> 
    <!-- 
    try{ 
     var isStoped = false; 
     var oScroll = document.getElementById("scrollWrap"); 
     with(oScroll){ 
     noWrap = true; 
     } 
     
     oScroll.onmouseover = new Function(isStoped = true); 
     oScroll.onmouseout = new Function(isStoped = false); 
     
     var preTop = 0; 
     var curTop = 0; 
     var stopTime = 0; 
     var oScrollMsg = document.getElementById("scrollMsg");
     
     oScroll.appendChild(oScrollMsg.cloneNode(true)); 
     init_srolltext(); 
    }catch(e) {} 
     
    function init_srolltext(){ 
     oScroll.scrollTop = 0; 
     setInterval(scrollUp(), 20); 
    } 
     
    function scrollUp(){ 
     if(isStoped) return; 
     curTop += 1; 
     if(curTop == 26) { 
     stopTime += 1; 
     curTop -= 1; 
     if(stopTime == 120) { 
     curTop = 0; 
     stopTime = 0; 
     } 
     }else{ 
     preTop = oScroll.scrollTop; 
     oScroll.scrollTop += 1; 
     if(preTop == oScroll.scrollTop){ 
     oScroll.scrollTop = 0; 
     oScroll.scrollTop += 1; 
     } 
     } 
    } 
    //--> 
    </script>
</body></html>

 

div 无缝滚动

标签:

原文地址:http://www.cnblogs.com/linsu/p/4790599.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!