<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. System.Web.Mvc.ViewEngineResult.cs

    ylbtech-System.Web.Mvc.ViewEngineResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, P ...

  2. PAT甲级——A1079 Total Sales of Supply Chain

    A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)-- everyone invo ...

  3. shell下时间日期的加减乘除运算

    首先我们先来说说什么是shell下的时间戳: 自1970年1月1日(00:00:00 UTC/GMT)以来的秒数.它也被称为Unix时间戳(Unix Timestam.Unix epoch.POSIX ...

  4. CF集萃3

    CF1118F2 - Tree Cutting 题意:给你一棵树,每个点被染成了k种颜色之一或者没有颜色.你要切断恰k - 1条边使得不存在两个异色点在同一连通块内.求方案数. 解:对每颜色构建最小斯 ...

  5. Django项目：CMDB(服务器硬件资产自动采集系统)--01--01CMDB获取服务器基本信息

    AutoClient #settings.py # ————————01CMDB获取服务器基本信息———————— import os BASEDIR = os.path.dirname(os.pat ...

  6. HTML5 drag拖动事件

    参考链接:https://segmentfault.com/a/1190000013606983 例子: <!DOCTYPE HTML> <html> <head> ...

  7. VS中添加配置X86平台

    最近IIS发布程序时,总是容易碰到下面的错误.这个错误网上绝大部分都是提出在VS把解决方案设置为在X86平台生成,然后再发布.但是查看应用程序后发现没有X86平台选项,下面是添加X86目标平台的方法.

  8. 基于Skyline与ArcGIS Server的二三维联动功能实现

    基于Skyline与ArcGIS Server的二三维联动功能实现主要利用WEB技术.ArcGIS for JavaScript.Skyline 二次开发以及ArcGIS 10.1 桌面工具. 利用A ...

  9. PipeCAD之管道标准库PipeStd(3)

    PipeCAD之管道标准库PipeStd(3) Key Words: PipeCAD, PipeStd, Pipe Design 3D, Linux 1. Introduction    管道标准部件 ...

  10. 解决 Error retrieving parent for item: No resource found that matches the given name 'Theme.AppCompat.Light.DarkActionBar'

    If you are looking for the solution in Android Studio : Right click on your app Open Module Settings ...