间歇滚动：滚动一行后，延迟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. 写一篇 Bootstrap弹窗确认的文章。本周完成

    思路; 点击按钮,显示模态 点击确定,异步提交 根据结果,删除指定的记录

  2. [题解]bzoj 1861 Book 书架 - Splay

    1861: [Zjoi2006]Book 书架 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 1396  Solved: 803[Submit][Stat ...

  3. 安卓handler、thread实现异步任务

    [转]http://blog.csdn.net/lanpy88/article/details/6659630 一Handler的定义: 主要接受子线程发送的数据, 并用此数据配合主线程更新UI.   ...

  4. JavaScript定时机制、以及浏览器渲染机制 浅谈

    昨晚,朋友拿了一道题问我: a.onclick = function(){ setTimeout(function() { //do something ... },0); }; JavaScript ...

  5. UWP项目的包无法通过本地校验程序

    在UWP工程中,我们打出的包Appx需要通过本地的校验程序校验通过后才可以进行商店的提交.在校验程序汇报的不通过原因当中,除了显而易见的因为美术资源不规范.代码调用不合法API等原因之外,还有一些奇怪 ...

  6. xshell安装运行时提示缺少mfc110.dll

    下载最新的mfc110.dll文件 https://pan.baidu.com/share/link?shareid=1932421734&uk=1784696518&app=zd 之 ...

  7. java 错误 classes路径配置错误

    1. 错误显示页 2. 解决步骤 2.1. 查看 root cause 信息 org.springframework.beans.factory.BeanCreationException: Erro ...

  8. cookie、session、sessionid的区别

    我们都知道银行,银行的收柜台每天要接待客户存款/取款业务,可以有几种方案: 1.凭借柜台职员的记忆,由收柜台职员来为每位顾客办理存款/取款业务,单凭职员的记忆力,要记到每位顾客的相貌,并迅速这个顾客当 ...

  9. 使用 Passenger +Apache扩展 Puppet,代替其Webrick的web框架

    使用 Passenger +Apache扩展 Puppet,代替其Webrick的web框架 1安装 yum install ruby-devel ruby-libs rubygems libcurl ...

  10. springmvc java.lang.NoSuchMethodError: com.fasterxml.jackson.core.JsonFactory.requiresPropertyOrdering()Z

    在hibernate spring springMVC整合的时候出现下面的情况: WARNING: Exception encountered during context initializatio ...