详解非W3C标准marquee标签

最新推荐文章于 2021-10-26 15:07:10 发布

spring21st

最新推荐文章于 2021-10-26 15:07:10 发布

阅读量5k

点赞数

分类专栏： DHTML 文章标签： c behavior xhtml css function class

DHTML 专栏收录该内容

132 篇文章 0 订阅

订阅专栏

为什么W3C一直不承认Marquee呢？要说这个标签在广大网页设计人员的眼里也算是把螺丝刀啊！在早年还是我们引以为技术力量作为炫耀的资本呢。可现在不主张用了（这里要题外话：很多人说W3C不许用了，这都是错的，W3C没权限制你不许用或是不能用。），为什么呢那我们要明确这个标准是什么。标准并不是一项技术，标准只是一种规范与提议。我们用的依然是原来的HTML4.0中的标签，标准没有给我们的XHTML中加入什么标签，而是给出了哪些是推荐使用的（例：p,div,ul,dl,span,em…），哪些是主张不使用的（例：font,b,u,i…），并且主张了要语义化与使用规范。当然标准不只是XHTML同时还包括了CSS与DOM还有脚本语言。很多人以为CSS是标准后才产生的，其实不是，CSS很早就有了，标准之于CSS也是一样，主张不使用一些浏览器厂商制定的一些CSS，比如CSS滤镜。

在标准中还有很重要的一点，那就是功能性分离。分成为结构、样式、行为三个部分，这三个部分分别包括了，结构（xHTML、XML），样工（CSS），行为（DOM、ECMAScript）。到这里我们返回来想想那个Marquee为什么不被W3C所承认，我想大家伙都应明白了。他与FONT、B等标签一样已经不是结构性标签了。他们中带有了样式与行为特性，再把他们划在结构的范畴里很明显是多多余了。

所以，大家希望Marquee的效果能被保留或是实现就需要多多关注一下JavaScript，脚本语言一定能让你的网页动起来。要想让你指定的地方动起来当然要注意标签中的ID与CLASS的使用。如果你还不了解，可以看一下我5月8日的那篇文章。

为了方便大家使用这个有意思的效果，我特意请嗷嗷写了一段JS，看以下代码：

JS代码：

function getElementsByClass(searchClass,tagName) {
var classElements = new Array();
if ( tagName == null )
tagName = '*';
var els = document.getElementsByTagName(tagName);
var elsLen = els.length;
var pattern = new RegExp("(^|/s)"+searchClass+"(/s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}

function ccMarquee(className){
var a=getElementsByClass(className);
for (i = 0; i < a.length; i++) {
a[i].innerHTML="<marquee>"+ a[i].innerHTML+"</marquee>";
}
}window.onload = function () {
ccMarquee("ccMarquee");
}XHTML代码：

<div class="ccMarquee">
<a href="" title="">这里是滚动的</a>
</div>

请大家注意，需要用到滚动效果的地方只要在其何外围的标签上加上Class="ccMarquee"即可。注意大小写。

<marquee>标签属性详解

marquee 的html 属性
<MARQUEE ALIGN="…"
　　behavior="…"
　　BGCOLOR="…"
　　DIRECTION="…"
　　HEIGHT="…"
　　WIDTH="…"
　　HSPACE="…"
　　VSPACE="…"
　　LOOP="…"
　　SCROLLAMOUNT="…"
　　SCROLLDELAY="…"
>…</MARQUEE>

align: 对齐方式 LEFT，CENTER，RIGHT，TOP，BOTTOM (不用多说了)
behavior: 用于设定滚动的方式，主要由三种方式：
behavior="scroll": 表示由一端滚动到另一端；
behavior="slide": 表示由一端快速滑动到另一端，且不再重复；
behavior="alternate" : 默认值——表示在两端之间来回滚动。
direction: left(默认值) 左; right 右;up 上;down 下;
bgcolor: 背景颜色
height: 高度
weight: 宽度
Hspace/vspace: 分别用于设定滚动字幕的左右边框和上下边框的宽度。作用大概和css中的margin差不多
scrollamount: 用于设定每个连续滚动文本后面的间隔，该间隔用像素表示，以上是官方说法,其实就是滚动的速度，值不能太大,要不从视觉角度来说,是没反应的.值越大速度越快，反之越慢。
scrolldelay: 延迟时间
loop: 这个属性大家也很熟悉，循环次数；loop=-1的时候一直重复循环（默认值）

好，现在我们再来接触一些Dcode的一些知识。
首先是两个鼠标事件

onmouseover: 鼠标触发事件---当用户将鼠标指针移动到对象内时触发
onmouseout: 鼠标滑出事件---当用户将鼠标指针移出对象边界时触发
这里要用到的是 this.start() 与this.stop()
FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体; mso-ascii-font-family: Verdana; mso-hansi-font-family: Verdana">意思就是鼠标移到marquee的内容上的时候停止循环，鼠标移开marquee 又开始移动。
继续
innercode: 设置或获取位于对象起始和结束标签内的 code
innerText: 设置或获取位于对象起始和结束标签内的文本
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。PS:大家不要想当然的以为有scrollRigh和scrollDown ：）
scrollDelay: 设置或获取字幕滚动的速度，要创建垂直滚动的字幕，请将其 scrollLeft 属性设定为0，要创建水平滚动的字幕，请将其 scrollTop 属性设定为 0，这将覆盖任何脚本设置
scrollHeight: 获取对象的滚动高度
scrollAmount: 设置或获取介于每个字幕绘制序列之间的文本滚动像素数
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
setInterval: 交互时间。它从载入后,每隔指定的时间就执行一次表达式
clearInterval: 使用 setInterval 方法取消先前开始的间隔事件。