<html>
<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>2013-10-09</span></li>
<li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>
</div>
<!-- 中间结束 -->
</div>
<!-- 慕课网课程公告结束 -->
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
var speed = 50;
area.scrollTop = 0;
con2.innerHTML = con1.innerHTML;
function scrollUp(){
if(area.scrollTop >= con1.scrollHeight) {
area.scrollTop = 0;
}else{
area.scrollTop ++;
}
}
var myScroll = setInterval("scrollUp()",speed);
area.onmouseover = function(){
clearInterval(myScroll);
}
area.onmouseout = function(){
myScroll = setInterval("scrollUp()",speed);
}
</script>
</body>
</html>

Javascript实现信息滚动效果的方法的更多相关文章

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

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

  2. JS魔法堂：通过marquee标签实现信息滚动效果

    一.前言   有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签 是其中一个较简单的实现方式.下面记录一下,供日后查阅. ...

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

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

  4. 使用JavaScript实现新闻滚动效果

    最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 使用Marquee标签.这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了 ...

  5. jQuery实现的向下推送图文信息滚动效果

    HTML 我们以新浪微博信息滚动为背景,html中包含了多条微博图文信息,结构如下: <div id="con"> <ul> <li> < ...

  6. javascript 列表定时滚动效果

    HTML结构: <div style="width:200px;height:100px;overflow:hidden;border:1px solid #ddd;margin:20 ...

  7. JS学习笔记之页面信息滚动效果

    效果截图: 1.无缝滚动效果 JS代码: <script> window.onload=function(){ var oInfobox=document.getElementById(' ...

  8. JavaScript实现页面滚动到div区域div以动画方式出现

    用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...

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

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

随机推荐

  1. lavarel中如何使用memcache

    lavarel中如何使用memcache 一.总结 一句话总结: composer下载包,配置,使用函数 1.memcache是什么? 键值对内存缓存 MemCache是一个自由.源码开放.高性能.分 ...

  2. 引用不了XXservice,怎么办？

    1.tEdasArchiveLogService = (TEdasArchiveLogService) SpringContextHolder.getBean("TEdasArchiveLo ...

  3. Windows API 第四篇 文件操作

    创建或打开文件(也可用于打开管道,油槽,硬件设备等): HANDLE CreateFile( LPCTSTR lpFileName, // file name DWORD dwDesiredAcces ...

  4. ArcMap应用——三维场景中井盖的属性配置

    在精细三维场景中,有地面(包括道路面.马路牙子).有部件数据(包括井盖).我们会发现有马路牙子的地方比道路面要高出一部分,比如0.1米,但是雨水井盖却有些在路面上.有些在道路以外.就是说在道路面上的井 ...

  5. app-safeguard-record：record

    ylbtech-work-app-safeguard-record:record 1.返回顶部 1. 示数 示数一般是指机械.仪器.仪表.或者需要对数字进行公开的显示的对外数字的宣示.比如电度表(千瓦 ...

  6. mysql 如果处理货币金钱类型

    我们知道,数据库存金钱类型可以float.double.decimal ,相比较而已decimal 最好用. 好吧, 我们公司用的分为单位, 类型 用bigint 存取,操作的时候到是很方便, 展示的 ...

  7. Python - 集合与元素之集合定义和基本操作方法

    集合(set) 定义:由不同元素组成的集合,集合中是一组无序排列可hash的值(不可变的值)例如数字.字符串.元组,可以作为字典的key 定义集合: # 定义集合 s = {1, 2, 3, 3, 3 ...

  8. 二、深入asyncio协程（任务对象，协程调用原理，协程并发）

      由于才开始写博客,之前都是写笔记自己看,所以可能会存在表述不清,过于啰嗦等各种各样的问题,有什么疑问或者批评欢迎在评论区留言. 如果你初次接触协程,请先阅读上一篇文章初识asyncio协程对asy ...

  9. PHP 缓存详解

    为什么要使用缓存 一个网站或者一个应用的标准流程是浏览器向应用服务器发出请求,应用服务器做一些计算和逻辑判断之后再请求数据库,数据库收到请求后在经过计算将数据返回给应用服务器,应用服务器再次计算后把数 ...

  10. 5.appium命令行环境搭建及参数使用

    1.安装淘宝npm(cnpm) (1)输入以下命令 :npm install -g cnpm --registry=https://registry.npm.taobao.org (2)输入cnpm ...