间歇滚动：滚动一行后，延迟2秒后继续滚动

具体实现代码如下：

 <!doctype html>

 <html lang="en">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <meta name="keywords" content="关键字1,关键字2" />

 <meta name="Description" content="描述信息" />

 <title>间歇循环滚动</title>

 <!--CSS/JS-->

 <style type="text/css">

 *{margin:0;padding:0;}

 ul,li{list-style:none;display:block;}

 #scrollBox{height:144px;width:300px;margin:100px auto;background:#f09;overflow:hidden;}

 #scrollBox #con1,#con2{width:280px;float:left;}

 #scrollBox li{line-height:24px;text-align:center;}

 </style>

 </head>

 <body>

 <!--div-->

 <div id="scrollBox">

 <ul id="con1">

 <li>我是测试内容1！！<li>

 <li>我是测试内容2！！<li>

 <li>我是测试内容3！！<li>

 <li>我是测试内容4！！<li>

 <li>我是测试内容5！！<li>

 <li>我是测试内容6！！<li>

 <li>我是测试内容7！！<li>

 <li>我是测试内容8！！<li>

 <li>我是测试内容9！！<li>

 </ul>

 </div>

 <script type="text/javascript">

 var area =document.getElementById('scrollBox');

 var lHeight = 24;

 var time = 50;

 area.innerHTML+=area.innerHTML;

 area.scrollTop = 0;

 var timer;

 function scrollMove(){

 area.scrollTop++;

 timer = setInterval("scrollUp()",time);

 }

 function scrollUp(){

 if(area.scrollTop % lHeight==0){//滚动一行后，延时2秒

 clearInterval(timer);

 setTimeout("scrollMove()",2000);

 }else{

 area.scrollTop++;

 if(area.scrollTop>=area.scrollHeight/2){    //判断滚动高度,当滚动高度大于area本身的高度时，使其回到原点重新滚动

 area.scrollTop = 0;

 }

 }

 }    

 setTimeout("scrollMove()",2000);//延迟2秒后执行scrollMove

 </script>

 </body>

 </html>

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

JS实例——间歇循环滚动的更多相关文章

  1. js实现无缝循环滚动

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. cocos2d JS 设置字幕循环滚动(背景图滚动亦可)

    var dong = ccs.load("res/Login.json"); this.addChild(dong.node); this.cShamNotice = ccui.h ...

  3. DIV+javascript实现首尾相连循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  5. 原生js移动端列表无缝间歇向上滚动

    在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...

  6. scrollTop实现图像循环滚动（实例1）

    <html><head><title>scrollTop实现图像循环滚动(实例1)</title><meta http-equiv="C ...

  7. 前端小插件之手写js循环滚动特效

    很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...

  8. 【js与jquery】jquery循环滚动新闻

    2.html代码: <h3>最新动态</h3> <div class="scrollNews" > <ul> <li>& ...

  9. JavaScript学习笔记——简单无缝循环滚动展示图片的实现

    今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...

随机推荐

  1. _foreach

    从JDK1.5之后增加的foreach循环取消索引 for(类型 变量 : 数组 | 集合){ 每一次循环会自动将数组内容设置给变量 } 范例: ,,,} ; for(int x : i){ Syst ...

  2. HDU 1813 Escape from Tetris

    TMDTMD IDA*没跑了.什么是IDA*? 就是迭代深搜+A*估个价. 然而为什么调了一天? n<=2的时候我输出了东西.... 看了一天. #include<iostream> ...

  3. sae中thinkphp使用smarty

    因为最近在学thinkphp跟着做一个小商城. 没有使用thinkphp自带的think引擎,使用的是smarty引擎. 在sea中使用的时候出现了问题.已经是前几天的事了,问题图片没保存下来. 在网 ...

  4. apache的工作模式 和 最大连接数设置

    经过测试 效果明显 (1)首选查看apache的工作模式 windows下的查看apache的工作模式命令:httpd -l 如果列出mod_win32.c,则表示是 win32.c 工作方式. 列出 ...

  5. PHP的一些 有用但不常用的函数记录

    1. microtime() 当前 Unix 时间戳以及微秒数. <?php $mem = new Memcache; $mem->connect("127.0.0.1" ...

  6. C# Unity游戏开发——Excel中的数据是如何到游戏中的 （一）

    引言 现在做游戏开发的没有几个不用Excel的,用的最多的就是策划.尤其是数值策划,Excel为用户提供强大的工具,各种快捷键,各种插件,各种函数.但是作为程序来说其实关注的不是Excel而是它最终形 ...

  7. mfix模拟流化床燃烧帮助收敛的方法

    1.在反应速率里用rate_limit函数:2.初始床料中可以添加一部分碳和灰.下面给出详细解释: 1.c3m生成的化学反应速率中有一个这样的函数: double precision function ...

  8. spring mvc上传下载文件

    前端jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  9. 客户端禁用cookie情况下的URL重写

    客户端禁用cookie情况下的URL重写: servlet: package com.stono.servlet.listenerorder; import java.io.IOException; ...

  10. Flex移动皮肤开发(二)

    范例文件 mobile-skinning-part2.zip 在这个讨论创建 Flex 移动 skin 的系列的 第 1 部分 中,我讨论了 Flex 团队在 Mobile 主题中所做的性能优化的原理 ...