您的位置:首页 > 产品设计 > UI/UE

信息滚动(marquee+JS实现)

2017-01-08 16:45 405 查看
Attributes
behavior
Sets how the text is scrolled within the marquee. Possible values are scroll, slide and alternate.
If no value is specified, the default value is scroll.
bgcolor
Sets the background color through color name or hexadecimal value.
direction
Sets the direction of the scrolling within the marquee. Possible values are left, right, upand down.
If no value is specified, the default value is left.
height
Sets the height in pixels or percentage value.
width
Sets the width in pixels or percentage value.
hspace
Sets the horizontal margin
loop
Sets the number of times the marquee will scroll. If no value is specified, the default value is −1, which means the marquee will scroll
continuously.
scrollamount
Sets the amount of scrolling at each interval in pixels. The default value is 6.
scrolldelay
Sets the interval between each scroll movement in milliseconds. The default value is 85. Note that any value smaller than 60 is ignored and
the value 60 is used instead, unlesstruespeed is specified.
truespeed
By default, scrolldelay values
lower than 60 are ignored. If truespeed is present, those values are not ignored.
vspace
Sets the vertical margin in pixels or percentage value.

补充:

behavior的默认值为scroll

scrollamount 表示运动速度,值是正整数,默认为6,数值越大,移动速度也越快

scrolldelay 用于设定两次滚动操作之间的间隔时间,该时间以毫秒为单位

<marquee bgcolor=FF0000>...</marquee> 设定背景颜色

<marquee onmouseover="this.stop();" onmouseout="this.start();">...</marquee> 鼠标移上去就暂停滚动
为什么<marquee>标签会被弃用?

因为它违反了W3C的武学道义,W3C江湖第一原则就是功能性分离即行为与表现的分离,只有恪守这个原则的标签才会被允许参加舞林大会,其他类似于marquee尔等皆是歪门邪道,武功再高也不要,不要!好像就是武功太高啦,哈哈

无缝滚动
var area =document.getElementById("con");
var con1 = document.getElementById("con1");
var con2 = document.getElementById("con2");
con2.innerHTML = con1.innerHTML;

function scrollUp() {
if (con.scrollTop >= con1.offsetHeight) {
con.scrollTop = 0;
} else {
con.scrollTop ++;
}
<
c7af
span style="font-size:12px;">}

var myScroll = setInterval("scrollUp()", 30);
con.onmouseover = function () {
clearInterval(myScroll);
}
con.onmouseout = function () {
myScroll = setInterval("scrollUp()", 30);
}

间歇性滚动
// 克隆
var box3con =document.getElementById("box3con");
box3con1.innerHTML += box3con1.innerHTML;

function box3scrollUp() {
box3con.scrollTop ++;
if (box3con.scrollTop % 30 == 0) {
clearInterval(box3myScroll);
setTimeout(function () {
box3con.scrollTop ++;
box3myScroll = setInterval(box3scrollUp, 50);
}, 2000);
}
}

var box3myScroll = setInterval(box3scrollUp, 50);

box3con.onmouseover = function () {
clearInterval(box3myScroll);
}

box3con.onmouseout = function () {
box3myScroll = setInterval(box3scrollUp, 50);
}

<marquee>案例
<div id="box1">
<marquee behavior="" direction="up">
我是滚动默认up
</marquee>

<marquee behavior="scroll" direction="down" >
我是滚动behavior="scroll"down
</marquee>

<marquee behavior="slide" direction="" scrollamount="6" loop="2">
我是滚动behavior="slide"
</marquee>

<marquee behavior="scroll" direction="right" scrollamount="10" scrolldelay="0" onmouseover="this.stop();" onmouseout="this.start();">
<p><a href="">我是滚动behavior="scroll"</a></p>
</marquee>

<!-- "down"与"left"的合成 -->
<marquee behavior="scroll" direction="down" width="250" height="150" behavior="alternate" style="border:solid">
<marquee behavior="alternate" direction="left">
This text will bounce
</marquee>
</marquee>
</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  信息滚动 marquee