间歇滚动：滚动一行后，延迟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. IOS开发－UI学习－delegate（代理）的使用，键盘消失

    代理是IOS开发中用到的一种设计模式.今天做了一个代理的小练习: 以下项目实现了两个页面之间的相互切换,并且在切换页面的时候完成了从一个页面往另一个页面的传值.从主页面往其他页面传值是容易的,但是反过 ...

  2. 前端面试题整理（html篇）

    1.Doctype作用?标准模式与兼容模式各有什么区别? <!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器用什么文档标准 ...

  3. 洛谷 P1359 租用游艇

    题目描述 长江游艇俱乐部在长江上设置了n 个游艇出租站1,2,-,n.游客可在这些游艇出租站租用游艇,并在下游的任何一个游艇出租站归还游艇.游艇出租站i 到游艇出租站j 之间的租金为r(i,j),1& ...

  4. 按住ctrl键可以在新窗口打开图片

    用firebug查看网页时,img标签(或background属性里面的url地址源)里面的图片源按住ctrl键可以弹出新窗口显示,并可右键另存为到本地目录

  5. bzoj 3611[Heoi2014]大工程 虚树+dp

    题意: 给一棵树 每次选 k 个关键点,然后在它们两两之间 新建 C(k,2)条 新通道. 求: 1.这些新通道的代价和 2.这些新通道中代价最小的是多少 3.这些新通道中代价最大的是多少 分析:较常 ...

  6. C语言的指针使用

    今天老师总结了一下指针内容,感觉对理解指针有帮助, 1.大家在使用指针的时候容易忽略掉指针所在的位置.  假如定义一个变量int a=10: int *p: p=&a;    //p中存放变量 ...

  7. js模块化开发——前端模块化

    在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可:如今CPU.浏览器性能得到了极大的提升,很多页面逻辑迁移到了客 户端(表单验证等),随着web2.0时代的到来,Ajax技术 ...

  8. MySQL只恢复某个库或某张表

    在Mysqldump官方工具中,如何只恢复某个库呢? 全库备份 [root@HE1 ~]#mysqldump -uroot -p --single-transaction -A --master-da ...

  9. dbf导入sqlserver的方法

    1. dbf导出为foxpro2.x. 2.打开excel,点击打开,选择dbase文件,选中第一步保存的文件. 3.另存为xls格式 4.使用sql的dts导入xls.

  10. Android 网格视图GridView的使用

    网格视图GridView的排列方式与矩阵类似,当屏幕上有很多元素(文字.图片或其他元素)需要按矩阵格式进行显示时,就可以使用GridView控件来实现. 本文将以一个具体的实例来说明如何使用GridV ...