信息滚动(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>
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+JS实现)
- JS魔法堂:通过marquee标签实现信息滚动效果
- 【摘选自江苏移动网上营业厅】JS实现无间断向上滚动marquee
- marquee+js实现某个区域的“无缝滚动效果”
- 用marquee和div+js实现首尾相连循环滚动效果
- js信息滚动marquee标签
- JQuery插件Marquee.js实现无缝滚动效果
- 【网摘】JS实现无间断向左滚动marquee
- JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
- marquee标签不用js实现滚动效果
- JS与HTML结合使用marquee标签实现无缝滚动效果代码
- 分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
- 分别用marquee和div+js实现首尾相连循环滚动效果
- JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
- marquee (垂直)循环滚动的js实现
- 分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
- JS实现marquee滚动效果
- 用marquee和div+js实现首尾相连循环滚动效果
- Asp.net marquee与js实现滚动效果
- JQuery插件Marquee.js实现无缝滚动效果