前端常用效果——信息滚动效果
前端常用效果——信息滚动效果
一、使用marquee标签实现信息滚动
HTML的marquee用来插入一段滚动的文字。可以使用它的属性控制当文本到达容器边缘发生的事情。
1、marquee属性
1.1、behavior——设置文本在marquee元素内滚动的方式。
可选值有scroll，slide和alternate。如果未指定值，默认值为scroll。
scroll表示由一端滚动到另一端，会重复。
slide表示由一端滚动到另一端，不会重复。
alternate表示在两端之间来回滚动。
1.2、direction——设置marquee内文本滚动的方向。
可选值有left,right,up and down。如果未指定值，默认值为left。
1.3、loop——设置滚动的次数。如果未指定值，默认值为 −1，表示连续滚动。
1.4、scrollamount——设置每次滚动时移动的长度（以像素为单位），默认值为6。
1.5、scrolldelay——设置每次滚动时的时间间隔（以毫秒为单位）。
默认值为85。除非指定truespeed值，否则将忽略任何小于60的值，并改为使用60。
1.6、bgcolor——通过颜色名称或十六进制值设置背景颜色。
1.7、height——以像素或百分比值设置高度。
1.8、width——以像素或百分比值设置宽度。
1.9、hspace——设置水平边距。
1.10、vspace——以像素或百分比值设置垂直边距。
1.11、truespeed——默认情况下，会忽略小于60的scrolldelay值。若存在truespeed，那值不会被忽略。
2、marquee方法
2.1、start——开始滚动marquee。
2.2、stop——停止滚动 marquee。
需要注意的是：
marquee标签已废弃，不要再使用。尽管一些浏览器仍然支持它，但它不是必须的。此外，使用这个元素基本上是可以对用户做最糟糕的事情之一，所以不要这样做。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用marquee标签实现信息滚动title>
<style type="text/css">
*{margin:0;padding:0;}
ul{width:500px;height:500px;border:1px solid #000;margin:100px auto;}
ul li{list-style:none;}
style>
head>
<body>
<ul>
<li>
<marquee>使用marquee标签实现信息滚动marquee>li>
<marquee onmouseover="this.stop()" onmouseout="this.start()">
使用marquee标签实现信息滚动marquee>
li>
<li>
<marquee behavior="scroll">使用marquee标签实现信息滚动marquee>li>
<marquee behavior="slide">使用marquee标签实现信息滚动marquee>li>
<marquee behavior="alternate">使用marquee标签实现信息滚动marquee>li>
<li>
<marquee direction="left">使用marquee标签实现信息滚动marquee>li>
<marquee direction="right">使用marquee标签实现信息滚动marquee>li>
<marquee direction="up">使用marquee标签实现信息滚动marquee>li>
<marquee direction="down">使用marquee标签实现信息滚动marquee>li>
<li>
<marquee loop="3" scrollamount="10" scrolldelay="100">
使用marquee标签实现信息滚动
marquee>
li>
<li>
<marquee width="300px" height="100px" bgcolor="orange">
使用marquee标签实现信息滚动
marquee>
li>
ul>
body>
html>二、使用javascript实现文字信息无缝滚动
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Javascript实现文字信息无缝滚动title>
<style type="text/css">
*{margin:0;padding:0;}
.box{
width:500px;
height:350px;
margin:100px auto;
border:1px solid #000;
border-radius:20px;
box-shadow:5px 5px 10px #333;
overflow:hidden;
}
h3{
height:50px;
line-height:50px;
text-align:center;
font-size:28px;
color:#fff;
background:green;
}
.content{
height:300px;
overflow:hidden;
}
ul li{
list-style:none;
height:40px;
line-height:40px;
text-align:left;
padding-left:20px;
font-size:18px;
color:#333;
}
style>
head>
<body>
<div class="box">
<h3>信息列表h3>
<div class="content" id="content">
<ul class="msg1" id="msg1">
<li>考生走路甩手误将准考证扔河里 消防员跳河打捞li>
<li>20余省公务员省考笔试放榜 作弊者特别惨li>
<li>辟谷减肥：“大师”称意念发功可治病li>
<li>2017公务员考试34万人报名 平均24人抢1个职位li>
<li>钢票网与恒丰银行正式签订资金存管协议li>
<li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日li>
<li>美国会表决通过新驻华大使 月底有望赴华li>
<li>英国曼彻斯特发生爆炸 事发地正举行演唱会li>
<li>上海一家三口住9平米房间27年 儿子踩冰箱上床li>
<li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的li>
ul>
<ul id="msg2">ul>
div>
div>
<script>
var content=document.getElementById("content");
var msg1=document.getElementById("msg1");
var msg2=document.getElementById("msg2");
msg2.innerHTML=msg1.innerHTML;
var timer=100;
content.scrollTop=0;
function myScrollTop(){
if(content.scrollTop>content.scrollHeight){
content.scrollTop=0;
}else{
content.scrollTop++
}
}
setInterval('myScrollTop()',timer);
script>
body>
html>三、使用javascript实现文字信息无缝滚动鼠标悬停效果添加
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Javascript实现文字信息无缝滚动title>
<style type="text/css">
*{margin:0;padding:0;}
.box{
width:500px;
height:350px;
margin:100px auto;
border:1px solid #000;
border-radius:20px;
box-shadow:5px 5px 10px #333;
overflow:hidden;
}
h3{
height:50px;
line-height:50px;
text-align:center;
font-size:28px;
color:#fff;
background:green;
}
.content{
height:300px;
overflow:hidden;
}
ul li{
list-style:none;
height:40px;
line-height:40px;
text-align:left;
padding-left:20px;
font-size:18px;
color:#333;
}
li:hover{color:#f91;}
style>
head>
<body>
<div class="box">
<h3>信息列表h3>
<div class="content" id="content">
<ul class="msg1" id="msg1">
<li>考生走路甩手误将准考证扔河里 消防员跳河打捞li>
<li>20余省公务员省考笔试放榜 作弊者特别惨li>
<li>辟谷减肥：“大师”称意念发功可治病li>
<li>2017公务员考试34万人报名 平均24人抢1个职位li>
<li>钢票网与恒丰银行正式签订资金存管协议li>
<li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日li>
<li>美国会表决通过新驻华大使 月底有望赴华li>
<li>英国曼彻斯特发生爆炸 事发地正举行演唱会li>
<li>上海一家三口住9平米房间27年 儿子踩冰箱上床li>
<li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的li>
ul>
<ul id="msg2">ul>
div>
div>
<script>
var content=document.getElementById("content");
var msg1=document.getElementById("msg1");
var msg2=document.getElementById("msg2");
msg2.innerHTML=msg1.innerHTML;
var timer=100;
content.scrollTop=0;
function myScrollTop(){
if(content.scrollTop>content.scrollHeight){
content.scrollTop=0;
}else{
content.scrollTop++
}
}
upScroll = setInterval('myScrollTop()',timer);
content.onmouseover=function(){
clearInterval(upScroll);
};
content.onmouseout=function(){
upScroll = setInterval('myScrollTop()',timer);
};
script>
body>
html>四、使用javascript实现文字信息间歇性滚动
4.1、setTimeout()
*用法说明：
setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。（1000毫秒=1秒）
使用clearTimeout()方法来阻止该函数的执行。
setTimeout()在执行时，是在载入后延迟指定时间去执行一次表达式，仅执行一次。
*语法：
setTimeout(function, delayseconds, param1, param2, ...)
*参数描述：
function必需，要调用一个代码串，也可以是一个函数。
delayseconds可选，延迟时间，执行或调用function需要等待的时间，以毫秒计。默认为0。
param1, param2, ... 可选。传给执行函数的其他参数（IE9及其更早版本不支持该参数）。
*返回值:
返回一个ID（数字），可以将这个ID传递给clearTimeout()来取消执行。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>setTimeout方法title>
head>
<body>
<p id="ptxt">p>
<script type="text/javascript">
var p = document.getElementById("ptxt");
var value;
function log(){
value = 5;
p.innerHTML = value;
}
var txt = setTimeout("log()",1000);
script>
body>
html>4.2、setInterval()
*用法说明：
setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval()方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。
setInterval()返回的ID值可用作clearInterval()方法的参数。
setInterval()在执行时，载入后每隔指定的时间就执行一次。
*语法：
setInterval(function, seconds, param1, param2, ...)
*参数描述：
function必需，要调用一个代码串，也可以是一个函数。
seconds必须,周期性执行或调用function之间的时间间隔，以毫秒计。
param1, param2, ... 可选。传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。
*返回值:
返回一个ID（数字），可以将这个ID传递给clearInterval()，clearTimeout()以取消执行。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>setInterval方法title>
head>
<body>
<script>
setInterval("console.log('8')",1000);
script>
body>
html>4.3、clearTimeout()
*用法说明：
clearTimeout()方法可取消由setTimeout()方法设置的定时操作。
clearTimeout()方法的参数必须是由setTimeout()返回的ID值。
要使用clearTimeout()方法,在创建执行定时操作时要使用全局变量：x=setTimeout(function,delayseconds);如果方
法还未被执行，可以使用clearTimeout()来阻止它。
*语法:
clearTimeout(id_of_settimeout)
*参数描述:
id_of_setinterval:调用setTimeout()函数时所获得的返回值.
使用该返回标识符作为参数，可以取消该setTimeout() 所设定的定时执行操作。
*返回值:
没有返回值。
4.4、clearInterval()
*用法说明：
clearInterval()方法可取消由setInterval()函数设定的定时执行操作。
clearInterval()方法的参数必须是由setInterval()返回的ID值。
要使用clearInterval()方法, 在创建执行定时操作时要使用全局变量：x=setInterval(function, delayseconds);
可通过clearInterval()方法来停止执行。
*语法:
clearInterval(id_of_setinterval)
*参数描述:
id_of_setinterval:调用 setInterval() 函数时所获得的返回值.
使用该返回标识符作为参数，可以取消该setInterval()所设定的定时执行操作。
*返回值:
没有返回值。
4.5、实现间歇性信息滚动效果
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Javascript实现文字信息间歇性滚动滚动title>
<style type="text/css">
*{margin:0;padding:0;}
.box{
width:500px;
height:350px;
margin:100px auto;
border:1px solid #000;
border-radius:20px;
box-shadow:5px 5px 10px #333;
overflow:hidden;
}
h3{
height:50px;
line-height:50px;
text-align:center;
font-size:28px;
color:#fff;
background:green;
margin-bottom:10px;
}
.content{
height:300px;
overflow:hidden;
}
ul li{
list-style:none;
height:40px;
line-height:40px;
text-align:left;
padding-left:30px;
font-size:18px;
color:#333;
}
li:hover{color:#f91;}
style>
head>
<body>
<div class="box">
<h3>信息列表h3>
<div class="content" id="content">
<ul class="msg1" id="msg1">
<li>考生走路甩手误将准考证扔河里 消防员跳河打捞li>
<li>20余省公务员省考笔试放榜 作弊者特别惨li>
<li>辟谷减肥：“大师”称意念发功可治病li>
<li>2017公务员考试34万人报名 平均24人抢1个职位li>
<li>钢票网与恒丰银行正式签订资金存管协议li>
<li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日li>
<li>美国会表决通过新驻华大使 月底有望赴华li>
<li>英国曼彻斯特发生爆炸 事发地正举行演唱会li>
<li>上海一家三口住9平米房间27年 儿子踩冰箱上床li>
<li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的li>
ul>
<ul id="msg2">ul>
div>
div>
<script>
var content=document.getElementById("content");
var msg1=document.getElementById("msg1");
var msg2=document.getElementById("msg2");
var liHeight = 40;
var speed = 50;//滚动的速度
msg2.innerHTML=msg1.innerHTML;
var delay = 2000;
var time;
content.scrollTop=0;
function startScroll(){
time = setInterval('upScroll()',speed);
content.scrollTop++;
};
function upScroll(){
if(content.scrollTop % liHeight==0){
clearInterval(time);
setTimeout(startScroll,delay);
}else{
content.scrollTop++;
if(content.scrollTop >= content.scrollHeight/2){
content.scrollTop =0;
}
}
}
setTimeout(startScroll,delay)
script>
body>
html>