间歇滚动：滚动一行后，延迟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. td文字过长部分显示，鼠标移动显示全部内容

    只要在该td中加上title属性,鼠标移到这里就会看到全部内容, 在td中加上div,属性设置如下,就能显示宽度为200px的内容,大于则隐藏.代码如下: <td title="我是代 ...

  2. 【转】安卓Java的虚拟机区别

    Google于2007年底正式发布了Android SDK, 作为 Android系统的重要特性,Dalvik虚拟机也第一次进入了人们的视野.它对内存的高效使用,和在低速CPU上表现出的高性能,确实令 ...

  3. iOS 之 时间格式与字符串转换

    这个知识点涉及到三个类:NSDate.NSString,另外是一个最重要的类NSDateFormatter.它起到格式转换的作用,至于方法查看头文件就好了.时间格式注意下:yyyyMMddHHmmss

  4. Git Flow——Git团队协作最佳实践

    规范的Git使用 Git是一个很好的版本管理工具,不过相比于传统的版本管理工具,学习成本比较高. 实际开发中,如果团队成员比较多,开发迭代频繁,对Git的应用比较混乱,会产生很多不必要的冲突或者代码丢 ...

  5. 用js给html控件赋值

      用js给html控件赋值 <script> window.onload=function setValue()//在页面加载时赋值 { document.getElementById( ...

  6. ipyparallel 中的 pi的求法

    1.PI的求法的数学依据 如图,可以看见在边长为1的正方形里面,有一个1/4圆,我们随机在正方形中取点,点在圆内的概率和点在正方形内的概率之比正好为两者的面积之比.这样就有在圆内的点的数目比所有点的数 ...

  7. tomcat 修改网站路径（Java之负基础实战）

    1.找到server.xml 在tomcat安装路径/conf/server.xml 2.搜索webapps 添加 <Context path="" docBace=&quo ...

  8. 让表格table呈现边框，不用给tr、td加边框的写法

    <table width="100%" cellspacing="1" cellpadding="1" bgcolor="# ...

  9. 选项卡（TabHost）的功能与用法

    TabHost是一种非常实用的组件,TabHost可以很方便地在窗口上放置多个便签页,每个标签页相当于获得了一个与外部容器相同大小的组件摆法区域.通过这种方式,就可以在一个容器里放置更多组件,例如手机 ...

  10. double减法不准确的那些事儿

    CREATE TABLE `helei` (   `id` int(10) unsigned NOT NULL AUTO_INCREMENT,   `num1` double DEFAULT NULL ...