间歇滚动：滚动一行后，延迟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. HDU 1813 Escape from Tetris

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

  2. GitHub优秀的Android 开源项目

    GitHub上优秀Android开源项目 转载自 : http://my.eoe.cn/sisuer/archive/3348.html http://my.eoe.cn/sisuer/archive ...

  3. osgearth介绍(转载)-feature_labels.earth

    初识osg OSG的诞生 在 1997 年时,Don Burns 由于喜欢滑翔机运动且对计算机图形学非常熟悉,在 LINUX 上写了一个控制滑翔机的小引擎,这便是 OSG 的最初雏形.后来在 1998 ...

  4. Spring 之 示例(Java之负基础实战)

    接 Spring 之 配置 里面的代码. 现在要进行Controller的开发. 1.引用类 import org.springframework.web.servlet.mvc.Controller ...

  5. php调用js变量

    <script> function tuichu(skp){ <?php $ok="skp"; echo "alert($ok)";//实验代 ...

  6. Angular - - angular.identity和angular.noop

    angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. 格式:angular.identity() 使用代码: (function () { angular.modul ...

  7. js原生设计模式——2面向对象编程之继承—new类式继承

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

  8. HDU-1020-Encoding（水题，但题目意思容易搞错，英语的问题）

    题目链接 http://acm.hdu.edu.cn/webcontest/contest_showproblem.php?pid=1000&ojid=0&cid=7996&h ...

  9. JSP EL表达式使用

    JSP EL表达式使用: Servlet: package com.stono.servlet; import java.io.IOException; import java.util.HashMa ...

  10. hessian原理解析一(客户端分析)

    hessian 是一款开源的二进制远程通讯协议,使用简单方法提供了RMI功能,主要用于面向对象的消息通信. 优点:跨平台.多语言支持.使用简单 缺点:传递复杂对象性能会下降,不适合安全性高的应用 一 ...