zoukankan      html  css  js  c++  java
  • JS实例——间歇循环滚动

    间歇滚动:滚动一行后,延迟2秒后继续滚动

    具体实现代码如下:

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
     5 <meta name="keywords" content="关键字1,关键字2" />    
     6 <meta name="Description" content="描述信息" />
     7 <title>间歇循环滚动</title>
     8 <!--CSS/JS-->
     9 <style type="text/css">
    10 *{margin:0;padding:0;}
    11 ul,li{list-style:none;display:block;}
    12 #scrollBox{height:144px;width:300px;margin:100px auto;background:#f09;overflow:hidden;}
    13 #scrollBox #con1,#con2{width:280px;float:left;}
    14 #scrollBox li{line-height:24px;text-align:center;}
    15 
    16 </style>
    17 
    18 
    19 </head>
    20 <body>
    21 <!--div-->
    22 <div id="scrollBox">
    23 <ul id="con1">
    24 <li>我是测试内容1!!<li>
    25 <li>我是测试内容2!!<li>
    26 <li>我是测试内容3!!<li>
    27 <li>我是测试内容4!!<li>
    28 <li>我是测试内容5!!<li>
    29 <li>我是测试内容6!!<li>
    30 <li>我是测试内容7!!<li>
    31 <li>我是测试内容8!!<li>
    32 <li>我是测试内容9!!<li>
    33 </ul>
    34 
    35 </div>
    36 <script type="text/javascript">    
    37 var area =document.getElementById('scrollBox');    
    38 var lHeight = 24;
    39 var time = 50;
    40 area.innerHTML+=area.innerHTML;
    41 area.scrollTop = 0;
    42 var timer;
    43 function scrollMove(){
    44 area.scrollTop++;
    45 timer = setInterval("scrollUp()",time);
    46 }
    47 
    48 function scrollUp(){
    49 if(area.scrollTop % lHeight==0){//滚动一行后,延时2秒
    50 clearInterval(timer);
    51 setTimeout("scrollMove()",2000);
    52 }else{
    53 area.scrollTop++;
    54 if(area.scrollTop>=area.scrollHeight/2){    //判断滚动高度,当滚动高度大于area本身的高度时,使其回到原点重新滚动    
    55 area.scrollTop = 0;    
    56 }
    57 }
    58 
    59 }    
    60 
    61 setTimeout("scrollMove()",2000);//延迟2秒后执行scrollMove
    62 
    63 
    64 </script>
    65 </body>
    66 
    67 </html>

    循环滚动 caolei sysker

    效果预览:点击这里我的github

  • 相关阅读:
    【VB编程】05.MsgBox与InputBox函数
    【VBA编程】04.使用自定义数据类型
    【VBA编程】03.判断输入年份是否是闰年
    ubuntu终端颜色设置
    常用命令
    adbd cannot run as root in production builds的解决方法
    camera table表编译
    [Linux]history 显示命令执行的时间
    ubuntu下动态链接库的编译和使用实例
    xxx is not in the sudoers file.This incident will be reported.的解决方法
  • 原文地址:https://www.cnblogs.com/caoleiCoding/p/6155995.html
Copyright © 2011-2022 走看看