二、JavaScript语言--JS实践--信息滚动效果制作
运用JavaScript技术，掌握无缝滚动和歇间性滚动的制作方法。
一、marquee标签实现信息滚动
1 behavior滚动的方式
alternate：表示在两端之间来回滚动
scroll：表示由一段滚动到另一端，会重复
slide：表示由一端滚动到另一端，不会重复
2 direction滚动的方向down、up、left、right
3 loop滚动的次数（当loop=-1表示一直滚动下去，默认为-1）
4 scrollamount设定活动字幕的滚动速度
5 scrolldelay设定活动字幕滚动两次之间的延迟时间
备注：marquee可以实现文字的简单滚动
示例：
<!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>HTML文字滚动效果</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:500px;
border:3px solid #ccc;
margin:50px auto 0;
padding:10px;
}
dl,dt{
list-style:none;
}
dl dt{
line-height:24px;
font-size:16px;
font-weight:bold;
color:#000;
}
</style>
</head> <body>
<div class="box">
<dl>
<dt>文字滚动示例（默认）：</dt>
<dd><marquee>我默认向左滚。。。。。</marquee></dd>
</dl>
<dl>
<dt>文字滚动示例（向右）：</dt>
<dd><marquee direction="right" scrolldelay="500">我向右滚动。。。。</marquee></dd>
</dl>
<dl>
<dt>文字滚动示例（默认方向，滚动方式为alternate，循环3次，速度为2）：</dt>
<dd><marquee scrollamount="2" behavior="alternate" loop="3">我来回滚动。。。。</marquee></dd>
</dl>
<dl>
<dt>文字滚动示例（向上，背景色为#CCFF66，设置了背景宽度和高度）：</dt>
<dd><marquee direction="up" bgcolor="#CCFF66" width="250" height="55">我在区域内滚动，向上哟。。。。</marquee></dd>
</dl> </div>
</body>
</html>
二、无缝滚动制作
知识点：
1 innerHTML
2 scrollTop
3 offsetHeight
4 setInterval()
5 clearInterval()
<!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>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>
三、间歇性无缝滚动
重点：使用setInterval()和setTimeout()
<!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">
<div id="moocTitle">慕课网最新课程<a href="#" target="_self">更多>></a> </div>
<div id="moocBox">
<ul>
<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>
</div>
<div id="moocBot"> </div>
</div>
<script type="text/javascript">
var area = document.getElementById('moocBox');
var iliHeight = 24; //单行滚动的高度
var speed = 50; //滚动的速度
var time;
var delay = 2000;
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, delay)
</script>
</body> </html>
二、JavaScript语言--JS实践--信息滚动效果制作的更多相关文章
- 二、JavaScript语言--JS实践--商城分类导航效果
商城类导航菜单制作(以京东为例--竖向列表横向伸缩) 可以用两种方式来实现:用CSS实现和用JS实现 方法一:用CSS实现(要点:使用hover) <!DOCTYPE html PUBLIC & ...
- 二、JavaScript语言--JS实践--倒计时效果
主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...
- JS魔法堂：通过marquee标签实现信息滚动效果
一.前言 有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签 是其中一个较简单的实现方式.下面记录一下,供日后查阅. ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
- 特殊例子--JavaScript代码实现图片循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 二、JavaScript语言--JS基础--JavaScript入门篇
1.如何插入JS 使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<scri ...
- JS学习笔记之页面信息滚动效果
效果截图: 1.无缝滚动效果 JS代码: <script> window.onload=function(){ var oInfobox=document.getElementById(' ...
- jQuery实现的向下推送图文信息滚动效果
HTML 我们以新浪微博信息滚动为背景,html中包含了多条微博图文信息,结构如下: <div id="con"> <ul> <li> < ...
随机推荐
- Effective Java 读书笔记之六 方法
一.检查参数的有效性 1.考虑参数有哪些限制,把限制写到文档中,在方法的开头处通过显式地检查来实施这些限制. 二.必要时进行保护性拷贝 1.如果类具有从客户端得到或者返回的可变组件,类就必须考虑保护性 ...
- Android学习笔记（五）——活动的生命周期
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 为了能写出流畅连贯的程序,我们需要了解一下活动的生命周期. 一.返回栈 Android 中的活动是可以层叠的. ...
- php配置中的register_globals用法
开发的时候设置成register_globals=off,只能通过post或get得到前端数据． 参考资料:http://blog.csdn.net/alex_best/article/details ...
- 技术博客（初用markdown）。
技术博客 菜鸟教程在这个网站我学到许多有趣的东西,并且弥补了我之前的一些不足之处. 以下为我学习到的内容 输出不同的三位数 以下为代码和输出结果 *** #include<stdio.h> ...
- 关于man和help的区别
help 是内部命令的帮助,比如cdman 是外部命令的帮助,比如ls
- Markdown入门教程
Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不 ...
- git 教程（4）--版本回退
现在,你已经学会了修改文件,然后把修改提交到Git版本库,现在,再练习一次,修改readme.txt文件如下: Git is a distributed version control system. ...
- ssh(安全外壳层)
SSH 为 Secure Shell 的缩写,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立在应用层基础上的安全协议.SSH 是目前较可靠,专为远程登录会 ...
- PHPCMS V9教程之快速入门
这篇文章要为大家来介绍PHPCMS V9这个系统的一些基本知识,PHPCMS是基于面向对象的,严格的安装MVC开发模式开发的CMS系统,同时他还是一个非 常不错的PHP框架.下面我们一起看一下PHPC ...
- redis配置文件redis.conf参数说明
redis配置文件redis.conf参数说明 (2013-01-09 21:20:40)转载▼ 标签: redis配置 redis.conf 配置说明 杂谈 分类: nosql # By defau ...