When qongqi is making web pages, in many cases, he will encounter a certain text or image that needs to scroll horizontally or vertically like an advertisement. In addition to js, he recently got a new skill - container tag <marquee>, which is introduced separately here. Down:
(1) Container label: mainly explain the container label <marquee>
This is a relatively simple and convenient implementation, which has been tested and compatible with IE9, chrome, and opera browsers
grammar:
<marquee></marquee>
Here is a simplest example:
<marquee><font size=+3 color=red>Hello, World</font></marquee>
The marquee tag can also move the picture from right to left (reciprocating), for example:
<marquee><img src="http://web.tanzhouedu.com/index/images/google2_ewm.png"></marquee>
The following two events are often used:
onMouseOut="this.start()" : Used to set the scrolling to continue when the mouse moves out of the area
onMouseOver="this.stop()": Used to set the scrolling to stop when the mouse moves into the area
example:
<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300"width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100"onMouseOut="this.start()" onMouseOver="this.stop()">This is a complete example </marquee>
This tag supports up to 11 attributes:
[1] align: Set the alignment of the content of the <marquee> tag
absbottom: Absolute bottom alignment (aligned with the bottom of the letter g, p, etc.)
absmiddle: Absolute center alignment
baseline: bottom line alignment
bottom: bottom alignment (default)
left: left-aligned
middle: center alignment
right: right-aligned
texttop: top line alignment
top: top alignment
【2】behavior: Set the scrolling method:
alternate: Indicates scrolling back and forth between the two ends.
scroll: Indicates scrolling from one end to the other, repeating.
slide: Indicates scrolling from one end to the other without repeating.
<marquee behavior="alternate">alternate: Indicates scrolling back and forth between the two ends. </marquee> <marquee behavior="scroll">scroll: means scrolling from one end to the other, repeating. </marquee> <marquee behavior="slide">slide: Indicates scrolling from one end to the other without repeating. </marquee>
[3] bgcolor: Set the background color of active subtitles. The background color can be set in the format of RGB, hexadecimal value or color name.
<marquee bgcolor="#006699">Set the background color of the active subtitle bgcolor="#006699"</marquee> <marquee bgcolor="RGB(10%,50%,100%,)">设定活动字幕的背景颜色 bgcolor="rgb(10%,50%,100%,)"</marquee> <marquee bgcolor="red">设定活动字幕的背景颜色 bgcolor="red"</marquee>
【4】direction：设定活动字幕的滚动方向
<marquee direction="down">设定活动字幕的滚动方向direction="down"：向下</marquee> <marquee direction="left">设定活动字幕的滚动方向direction="left"：向左</marquee> <marquee direction="right">设定活动字幕的滚动方向direction="right"：向右</marquee> <marquee direction="up">设定活动字幕的滚动方向direction="up"：向上</marquee>
【5】height：设定活动字幕的高度
<marquee height="500" direction="down" bgcolor="#CCCCCC"> 设定活动字幕的高度height="500"</marquee>
【6】width：设定活动字幕的宽度
<marquee width="500" bgcolor="#CCCCCC">设定活动字幕的宽度width="500"</marquee>
【7】hspace：设定活动字幕里所在的位置距离父容器水平边框的距离
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><marquee hspace="100" bgcolor="#CCCCCC">hspace="100"</marquee></td>
</tr>
</table>
【8】vspace：设定活动字幕里所在的位置距离父容器垂直边框的距离
<marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>
【9】loop：设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1
<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee> <p> </p> <marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee>
【10】scrollamount：设定活动字幕的滚动速度，单位pixels
<marquee scrollamount="10" >scrollamount="10" </marquee> <marquee scrollamount="20" >scrollamount="20" </marquee> <marquee scrollamount="30" >scrollamount="30" </marquee>
【11】scrolldelay：设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒），值大了会有一步一停顿的效果
<marquee scrolldelay="10" >scrolldelay="10" </marquee> <marquee scrolldelay="100" > scrolldelay="100"</marquee> <marquee scrolldelay="1000">scrolldelay="1000" </marquee>
（二）JS实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js文字滚动制作js scroll单排文字滚动向上间隔滚动</title>
<meta name="description" content="js文字特效制作一个js文字滚动效果控制单排向上间隔滚动 scroll 文字滚动，内含js代码下载。">
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a, img {
border: 0;
}
#scrollWrap {
width: 300px;
height: 18px;
overflow: hidden;
background: #E6F6F6;
}
#scrollMsg li {
height: 18px;
line-height: 18px;
overflow: hidden;
font-size: 12px;
padding: 0 10px;
}
</style>
</head>
<body>
<div id="scrollWrap">
<ul id="scrollMsg">
<li><a href="http://www.17sucai.com/">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
<li><a href="http://www.17sucai.com/">javascript滚动图片带按钮控制上下左右自动无缝滚动</a></li>
<li><a href="http://www.17sucai.com/">javascript滚动图片按钮控制图片左右自动滚动</a></li>
<li><a href="http://www.17sucai.com/">js选项卡类似js导航菜单的js tab选项卡切换效果</a></li>
</ul>
</div>
<script type="text/javascript">
try {
var isStoped = false;
var oScroll = document.getElementById("scrollWrap");
with (oScroll) {
noWrap = true;
}
oScroll.onmouseover = new Function('isStoped = true');
oScroll.onmouseout = new Function('isStoped = false');
var preTop = 0;
var curTop = 0;
var stopTime = 0;
var oScrollMsg = document.getElementById("scrollMsg");
oScroll.appendChild(oScrollMsg.cloneNode(true));
init_srolltext();
} catch (e) {
}
function init_srolltext() {
oScroll.scrollTop = 0;
setInterval('scrollUp()', 15);
}
function scrollUp() {
if (isStoped)
return;
curTop += 1;
if (curTop == 19) {
stopTime += 1;
curTop -= 1;
if (stopTime == 180) {
curTop = 0;
stopTime = 0;
}
} else {
preTop = oScroll.scrollTop;
oScroll.scrollTop += 1;
if (preTop == oScroll.scrollTop) {
oScroll.scrollTop = 0;
oScroll.scrollTop += 1;
}
}
}
</script>
</body>
</html>
.
.