代码：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>向上无缝滚动</title>

<style>

body {

	font-size: 12px;

	line-height: 24px;

	text-algin: center;        /* 页面内容居中 */

}

* {

	margin: 0px;

	padding: 0px;            /*  去掉所有标签的marign和padding的值  */

}

ul {

	list-style: none;           /*  去掉ul标签默认的点样式  */

}

a img {

	border: none;        /*  超链接下，图片的边框  */

}

a {

	color: #333;

	text-decoration: none;     /* 超链接样式 */

}

a:hover {

	color: #ff0000;

}

#mooc {

	width: 399px;

	border: 5px solid #ababab;

	-moz-border-radius: 15px;      /* Gecko browsers */

	-webkit-border-radius: 15px;   /* Webkit browsers */

	border-radius: 15px;

	box-shadow: 2px 2px 10px #ababab;

	margin: 50px auto 0;

	text-align: left;               /* 让新闻内容靠左 */

}

/*  头部样式 */

#moocTitle {

	height: 62px;

	overflow: hidden;  /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */

	font-size: 26px;

	line-height: 62px;

	padding-left: 30px;

	background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */

	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/

	border: 1px solid ##f05e6f;

	-moz-border-radius: 8px 8px 0 0;      /* Gecko browsers */

	-webkit-border-radius: 8px 8px 0 0;   /* Webkit browsers */

	border-radius: 8px 8px 0 0;

	color: #fff;

	position: relative;

}

#moocTitle a {

	position: absolute;

	right: 10px;

	bottom: 10px;

	display: inline;

	color: #fff;

	font-size: 12px;

	line-height: 24px;

}

/*  底部样式 */

#moocBot {

	width: 399px;

	height: 10px;

	overflow: hidden;     /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */

}

/*  中间样式 */

#moocBox {

	height: 144px;

	width: 335px;

	margin-left: 25px;

	margin-top: 10px;

	overflow: hidden;    /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */

}

#mooc ul li {

	height: 24px;

}

#mooc ul li a {

	width: 180px;

	float: left;

	display: block;

	overflow: hidden;

	text-indent: 15px;

	height: 24px;

}

#mooc ul li span {

	float: right;

	color: #999;

}

</style>

</head>

<body>

<!--  慕课网课程公告开始 -->

<div  id="mooc">

<!--  头部 -->

<h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3>

<!--  头部结束 -->

<!--  中间 -->

<div  id="moocBox">

    <ul id="con1">

        <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>

        <li><a href="#">2.tab页面切换效果（案例）</a><span>2015-10-09</span></li>

        <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2015-10-21</span></li>

        <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2016-11-01</span></li>

        <li><a href="#">5.分页页码制作（案例）</a><span>2016-11-06</span></li>

        <li><a href="#">6.导航条菜单的制作（案例）</a><span>2015-11-08</span></li>

        <li><a href="#">7.信息列表制作(案例)</a><span>2015-11-15</span></li>

        <li><a href="#">8.下拉菜单制作(案例)</a><span>2017-11-22</span></li>

        <li><a href="#">9.如何实现“新手引导”效果</a><span>2017-12-06</span></li>

    </ul>

    <ul id="con2">

    </ul>

</div>

<!--  中间结束 -->

</div>

<!--  慕课网课程公告结束 --> 

<script type="text/javascript">

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

 var iliHeight = 48;//单行滚动的高度

 var speed = 50;//滚动的速度

 var time;

 var delay= 1000;

 area.scrollTop=0;

 area.innerHTML+=area.innerHTML;//克隆一份一样的内容

 function startScroll(){

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

	 area.scrollTop++;

	 }

 function scrollUp(){

	 if(area.scrollTop % iliHeight==0){

		  clearInterval(time);

		 setTimeout(startScroll,delay);

		 }else{

			 area.scrollTop++;

			 if(area.scrollTop >= area.scrollHeight/2){

				 area.scrollTop =0;

				 }

			}

 }

	 setTimeout(startScroll,500);

 </script>

</body>

</html>

　　效果：

js 实现 间隙滚动效果的更多相关文章

  1. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  2. 二、JavaScript语言--JS实践--信息滚动效果制作

    运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...

  3. 用 Stellar.js 制作视差滚动效果

    参考 http://doc.bropaul.com/Stellar.js/docs/ https://github.com/markdalgleish/stellar.js#download http ...

  4. js 单行间隙滚动

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

  5. js无间隙滚动

    代码一: ; //设置文字滚动速度 dome2.innerHTML=dome1.innerHTML //复制dome1为dome2 function Marquee(){ ) //当滚动至dome1与 ...

  6. js实现向上滚动效果

    源码: <style type="text/css"> #up_zzjs{border:1px solid #ccc;width:170px;height:182px; ...

  7. js实现消息滚动效果

    <div class="inform" style=""> <div style="height:35px; overflow:hi ...

  8. javascript跟随滚动效果插件代码（javascript Follow Plugin）

    这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...

  9. js 实现文字滚动功能，可更改配置参数 带完整版解析代码。

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...

随机推荐

  1. java 逻辑运算符

    /* 与(并且) && 全部是true 否则就是false 或(或者) ||至少有一个是true ,就是true 全部是false 才是faalse 非(取反) ! 本来是true,变 ...

  2. Dubbox管理中心的部署及使用

    安装: 我们在开发时,需要知道注册中心都注册了哪些服务,以便我们开发和测试.我们可以通过部署一个管理中心来实现.其实管理中心就是一个web应用,部署到tomcat即可. (1)编译源码,得到war包 ...

  3. Java网络编程:OSI七层模型和TCP/IP模型介绍

    OSI(Open System Interconnection),开放式系统互联参考模型 .是一个逻辑上的定义,一个规范,它把网络协议从逻辑上分为了7层.每一层都有相关.相对应的物理设备,比如常规的路 ...

  4. 带你逐行阅读redux源码

    带你逐行阅读redux源码 redux版本:2019-7-17最新版:v4.0.4 git 地址:https://github.com/reduxjs/redux/tree/v4.0.4 redux目 ...

  5. Oracle查询用户所有表

    https://blog.csdn.net/wssiqi/article/details/44617197 Oracle查询用户所有表   下面为您介绍的语句用于实现Oracle查询用户所有表,如果您 ...

  6. 【和孩子一起学编程】 python笔记--第一天

    [该随笔记录本人在阅读过程写的笔记和一些问题,格式比较随意,不定时更新] 由于该书使用的python版本为2.5,本人使用的为3.6. 第一章: 遇到的第一个问题: 1.3节 输出指令: print ...

  7. Ubuntu备份与恢复

    在使用Ubuntu之前,相信很多人都有过使用Windows系统的经历.如果你备份过Windows系统,那么你一定记忆犹新:首先需要找到一个备份工具(通常都是私有软件),然后重启电脑进入备份工具提供的软 ...

  8. shell变量，字符串，数组

    一.shell变量定义: 命名只能使用英文字母,数字和下划线,首个字符不能以数字开头: 中间不能有空格,可以使用下划线: 不能使用标点符号: 不能使用bash里的关键字. 变量使用: 使用一个定义过的 ...

  9. MOSFET学习

    MOS/CMOS集成电路简介及N沟道MOS管和P沟道MOS管 在实际项目中,我们基本都用增强型mos管,分为N沟道和P沟道两种. 我们常用的是NMOS,因为其导通电阻小,且容易制造.在MOS管原理图上 ...

  10. python 100day notes(2)

    python 100day notes(2) str str2 = 'abc123456' print(str1.endswith('!')) # True # 将字符串以指定的宽度居中并在两侧填充指 ...