教你五分钟实现前端页面滚动信息的制作

marquee标签的介绍

这个标签是html里面用来制作滚动信息栏目的一个标签,而且这是个成对出现的闭合的标签.用起来类似于html里面很常规的标签.但是由于这个标签吧,很久都没使用了,现在我们也只是粗略介绍一下里面的一些个属性,主要部分还是得靠JavaScript来实现.

<marquee>marquee>

首先介绍这个标签的第一个属性:

1.behaviour

这个参数主要用来设置滚动的方式.
我们可以为这个标签设置alternative,scroll,slide这三种属性.

参数名称	作用
alternative	表示标签里面的元素在容器里面来回滚动
scroll	表示由一端滚动到另外一端,会重复
slide	表示从一端滚回到另外一端,但是滚完就停止

2.direction

这个属性主要来设置元素滚动的方向

参数名称	作用
down	向下
up	向上
left	向左
right	向右

3.loop

这个属性主要用于设置滚动的次数
值为-1的时候表示一直滚下去,默认的值为-1.
然后我们可以设置其他的值来设置这个的滚动次数.

4.scrollamount

此属性主要用于设定活动字幕的滚动字幕.

5.scrolldelay

这个属性用来设定活动字幕滚动两次之间的延迟时间.

<marquee scrollamount="2" behaviour="alternative" loop="3" direction="right" scrolldelay="500">marquee>

借用这些知识以及一些css布局的技巧我们可以写出这样的一个滚动信息的界面.
html代码如下:

<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>

样式布局css代码如下:

*{
   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;
 }

这样就可以搞出一个比较简单的demo.

但是显然这和我们实际开发情况相差是比较远的.而且现在我们在开发过程中一般是不会怎么使用marquee这个标签的,因为这个标签不属于css3里面的东西.为了实现更加酷炫的效果,我们可以利用万能的nb的JavaScript来实现这一系列的功能.

JavaScript无缝信息滚动效果实现

首先我们主体由一系列信息来组成,这个时候我们利用ul和li标签来对其进行设计:

<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-18span>li>
        <li><a href="#">2.tab页面切换效果（案例）a><span>2013-10-09span>li>
        <li><a href="#">3.圆角水晶按钮制作（案例）a><span>2013-10-21span>li>
        <li><a href="#">4.HTML+CSS基础课程(系列)a><span>2013-11-01span>li>
        <li><a href="#">5.分页页码制作（案例）a><span>2013-11-06span>li>
        <li><a href="#">6.导航条菜单的制作（案例）a><span>2013-11-08span>li>
        <li><a href="#">7.信息列表制作(案例)a><span>2013-11-15span>li>
        <li><a href="#">8.下拉菜单制作(案例)a><span>2013-11-22span>li>
        <li><a href="#">9.如何实现“新手引导”效果a><span>2013-12-06span>li>
    ul>
    <ul id="con2">
    ul>
div>
 
div>
 

然后我们利用对这些进行一个简单的布局设计:

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;
}

写了这么一大堆,然后就进入正题—JavaScript.
其实也比较简单,主要就是需要一下几点的知识:
1.setInterval()
2.clearInterval()
3.innerHTML
4.节点操作
首先我们先获取到dom元素

var area=document.getElementById('moocBox');
var con1=document.getElementById("con1");
var con2=document.getElementById("con2");

然后设置一个时间的值(js里面单位普遍都是ms):

var speed=50;

然后这里给大家介绍一些关于宽高的概念:

作用	语法
页可见区域宽	document.body.clientWidth;
网页可见区域高	document.body.clientHeight;
网页可见区域宽	document.body.offsetWidth (包括边线的宽);
网页可见区域高	document.body.offsetHeight (包括边线的宽);
网页正文全文宽	document.body.scrollWidth;
网页正文全文高	document.body.scrollHeight;
网页被卷去的高	document.body.scrollTop;
网页被卷去的左	document.body.scrollLeft;
网页正文部分上	window.screenTop;
网页正文部分左	window.screenLeft;;
屏幕分辨率的高	window.screen.height;
屏幕分辨率的宽	window.screen.width;
屏幕可用工作区高度	window.screen.availHeight;

这个地方在一个容器里面我们选择使用scrollTop来对滚动信息的实现进行操作:
先考虑一波无缝滚动的衔接,我们这个地方可以采用两个相同的文本内容来进行操作.
上面con2是获取的一个空的ul的节点,这个时候我们可以将con1的节点元素全部拷贝给con2

 con2.innerHTML = con1.innerHTML;

然后封装一个实现滚动的函数,在这一过程中要对函数的边界进行考虑.

 function scrollUp(){
	 if(area.scrollTop >= con1.scrollHeight) {
		 area.scrollTop = 0;
		 }else{
		   area.scrollTop ++; 
		 } 
}

然后要让这个能够实现的话,我们可以将其封存在一个setInterval函数里面,然后把这个函数赋值给一个变量

var myScroll = setInterval("scrollUp()",speed);

同时还要考虑鼠标的移入和移出操作.

area.onmouseover=function(){//鼠标的移入操作
    clearInterval(myScroll);//表示清空计时器相当与停止了播放
}
area.onmouseout{//鼠标的移出操作
   myScroll = setInterval("scrollUp()",speed);
}

然后到这里我们就可以简单实现一个滚动信息的制作了,谢谢各位的观看!