1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml"><head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  4. <title></title>
  5.  
  6. <style type="text/css">
  7. BODY {
  8.     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
  9. }
  10. * {
  11.     BACKGROUND-IMAGE: none;  background-color:#FAFBF5
  12. }
  13. #scrollWrap {
  14.     OVERFLOW: hidden; BORDER-LEFT-STYLE: none; HEIGHT: 25px
  15. }
  16. #scrollMsg {
  17.     PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 680px; PADDING-TOP: 0px; TEXT-ALIGN: left
  18. }
  19. #scrollMsg UL {
  20.     PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;float:left
  21. }
  22. #scrollMsg LI {
  23.     LINE-HEIGHT: 25px; LIST-STYLE-TYPE: none
  24. }
  25. </style>
  26.  
  27. </head>
  28. <body>
  29. <div id="scrollWrap">
  30. <div id="scrollMsg">
  31. <ul>
  32.   <li><font color="#069138">《三字经》</font>&nbsp;&nbsp;人之初  性本善  性相近  习相远  苟不教  性乃迁
  33.   <font color="#ff0000">《三字经》</font>
  34.   </li>
  35.   <li><font color="#069138">《三字经》</font>&nbsp;&nbsp;教之道  贵以专  昔孟母  择邻处  子不学  断机杼
  36.   <font color="#ff0000">《三字经》</font>
  37.   </li>
  38.   <li><font color="#069138">《三字经》</font>&nbsp;&nbsp;窦燕山  有义方  教五子  名俱扬  养不教  父之过
  39.   <font color="#ff0000">《三字经》</font>
  40.   </li>
  41.   <li><font color="#069138">《三字经》</font>&nbsp;&nbsp;教不严  师之惰  子不学  非所宜  幼不学  老何为
  42.   <font color="#ff0000">《三字经》</font>
  43.   </li>
  44.   <li><font color="#069138">《三字经》</font>&nbsp;&nbsp;玉不琢  不成器  人不学  不知义  为人子  方少时
  45.   <font color="#ff0000">《三字经》</font>
  46.   </li>
  47.  </ul></div>
  48.   </div>
  49. <script type="text/javascript">
  50.     <!--
  51.     try{
  52.      var isStoped = false;
  53.      var oScroll = document.getElementById("scrollWrap");
  54.      with(oScroll){
  55.      noWrap = true;
  56.      } 
  57.  
  58.      oScroll.onmouseover = new Function('isStoped = true');
  59.      oScroll.onmouseout = new Function('isStoped = false'); 
  60.  
  61.      var preTop = 0;
  62.      var curTop = 0;
  63.      var stopTime = 0;
  64.      var oScrollMsg = document.getElementById("scrollMsg");
  65.  
  66.      oScroll.appendChild(oScrollMsg.cloneNode(true));
  67.      init_srolltext();
  68.     }catch(e) {} 
  69.  
  70.     function init_srolltext(){
  71.      oScroll.scrollTop = 0;
  72.      setInterval('scrollUp()', 20);
  73.     } 
  74.  
  75.     function scrollUp(){
  76.      if(isStoped) return;
  77.      curTop += 1;
  78.      if(curTop == 26) {
  79.      stopTime += 1;
  80.      curTop -= 1;
  81.      if(stopTime == 120) {
  82.      curTop = 0;
  83.      stopTime = 0;
  84.      }
  85.      }else{
  86.      preTop = oScroll.scrollTop;
  87.      oScroll.scrollTop += 1;
  88.      if(preTop == oScroll.scrollTop){
  89.      oScroll.scrollTop = 0;
  90.      oScroll.scrollTop += 1;
  91.      }
  92.      }
  93.     }
  94.     //-->
  95.     </script>
  96. </body></html>

div 无缝滚动的更多相关文章

  1. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  2. JQuery的无缝滚动

    图片无缝向左滚动的代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  3. 自己写了一个无缝滚动的插件(jQuery)

    效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...

  4. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  5. Javascript学习之无缝滚动

    无缝滚动Javascript: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  6. js基础教程四之无缝滚动

    前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...

  7. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  8. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

  9. 一款经典的jQuery kxbdMarquee 无缝滚动插件

    <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...

随机推荐

  1. JS中鲜为人知的问题： [] == ![]结果为true，而 {} == !{}却为false

    console.log( [] == ![] ) // true console.log( {} == !{} ) // false 在比较字符串.数值和布尔值的相等性时,问题还比较简单.但在涉及到对 ...

  2. Java开发系列-JSP

    概述 JSP是java 服务器页面,它运行在服务器端,本质上就是一个serlvet,产生的java文件和class保留在tomcat的word目录下. JSP主要作用是将内容的生成与页面相分离. JS ...

  3. 关于jar包启动遇到的问题

    一.找不到propertites文件,错误如下 原因是打成的jar不包含classpath信息,需要运行时指定,命令为 -Xbootclasspath/a: 后缀在核心class搜索路径后面.常用! ...

  4. [转]Hessian——轻量级远程调用方案

    Hessian是caucho公司开发的一种基于二进制RPC协议(Remote Procedure Call protocol)的轻量级远程调用框架.具有多种语言的实现,但用的最多的当然是Java实现 ...

  5. 实时计算Flink on Kubernetes产品模式介绍

    Flink产品介绍 目前实时计算的产品已经有两种模式,即共享模式和独享模式.这两种模式都是全托管方式,这种托管方式下用户不需要关心整个集群的运维.其次,共享模式和独享模式使用的都是Blink引擎.这两 ...

  6. 第一个duilib程序 - 实现HelloWorld详解

    duilib是一个windows下的皮肤库,用win32写的... 先看个效果图吧: 要使用duilib库,必须先把库导入,代码如下: View Row Code 1 #include "x ...

  7. 19-11-1-N

    就剩一个键了…… 以后怎么办呢? 也许可以试试字符映射表……(滑稽 ZJ一下: 我还以为我要死了…… 40 Miemeng 10 03:21:50 80 03:21:51 10 03:21:51 10 ...

  8. malloc在函数内分配内存问题

    malloc函数用法可参考:C语言中 malloc函数用法 及 malloc函数 代码: void fun(char * p) { p=(); } void main() { char *p; fun ...

  9. 使用 Vue.js 和 Chart.js 制作绚丽多彩的图表

    本文作者:Jakub Juszczak 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35b ...

  10. java基础之二维数组-杨辉三角

    首先呢你要知道什么是杨辉三角? 答:杨辉三角,是二项式系数在三角形中的一种几何排列. 简单的说一下就是两个未知数和的幂次方运算后的系数问题,比如(x+y)的平方=x的平方+2xy+y的平方,这样系数就 ...