导航

毅博客

分享本身就是件快乐的事,我因别人得到帮助而感到幸福

« 结构中id与class的使用原则与技巧什么人适合学习WEB标准 »

为什么Marquee是不符合WEB标准的

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。
请大家帮忙:行文措辞难免有错,请大家在阅读时发现错误通过评论方式告诉我。谢谢大家

在经典论坛中看到网友jeanjean20提到Marquee怎么样修改才能符合标准。我看了一下朋友们的跟帖觉得说得都挺好,版主greengnn指明Marquee是不符合标准的已经被W3C抛弃了。有朋友大打不平的说觉得去得没道理,本来挺好的效果现在变没了。也有朋友说去了好,看着就烦。大家都有自己的理解角度,但是我们自己怎么理解是一回事,但是我们要弄清楚为什么,在这里我就greengnn的结论之后修改并补充一些内容,希望大家理解并能想通。

首先要更正的一点是:Marquee被W3C抛弃了。这句话其实这是错误的,为什么呢,因为Marquee从来都没有被W3C视为正式标签使用。W3C从来就没有制定这一标签,就更没有“抛弃”一说。这就好比还没结婚就说离婚一样。其实Marquee与很多其它的标签一样是由微软与网景等公司私制的,而W3C一直以来都没有承认这一标签。这有钱公司就是有不讲理这点毛病,不过这不盈利的组织就是嘴硬!

为什么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 direction=up behavior=scroll loop=3 scrollamount=1 scrolldelay=10 align=top bgcolor=#ffffff height=300 width=30% hspace=20 vspace=10 onmouseover=this.stop() onmouseout=this.start()> 此处输入滚动内容 </marquee>

现在让我们来具体分析一下
direction表示滚动的方向,值可以是left,right,up,down,默认为left behavior表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动) loop表示循环的次数,值是正整数,默认为无限循环 scrollamount表示运动速度,值是正整数,默认为6 scrolldelay表示停顿时间,值是正整数,默认为0,单位似乎是毫秒 align表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle bgcolor表示运动区域的背景色,值是16进制的RGB颜色,默认为白色 height、width表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度 hspace、vspace表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。 onmouseover=this.stop() onmouseout=this.start()表示当鼠标以上区域的时候滚动停止,当鼠标移开的时候又继续滚动。

作者 / 振之
网站 / 毅博客 http://andy.andymao.com/
电话 / (86)025 5890 9295
  • quote 2.振之
  • http://www.jonmax.com
  • 合不合标准我不是很在意,只要实用就好了。这不单是变相通过标准这么单纯的意图。而是让动作剥离HTML之外,可以让任何一段代码成为滚动。如果不用任何一段都不会有滚动属性。这才是关键所在。
  • 2006-10-2 17:51:06 回复该留言
  • quote 4.LampHexi
  • <script>
    var movescope = [0,100];
    var oMove;
    var st; //time
    function initMove() {

    oMove = $(document).find("a");
    oMove.css({position:"absolute",left:movescope[1],width:100})
    }
    function keepMove(){
    st = setInterval("move()",100);
    }
    function move() {
    var left = parseInt(oMove.css("left"));
    if(left<movescope[0]-oMove.width()-4) {
    left = movescope[1];
    }
    oMove.css({left:left -5})
    }
    window.onload = function () {
    initMove();
    keepMove();
    }
    </script>
    <div class="ccMarquee" style="position:relative;height:24;width:100;overflow:hidden;" onmouseover = "clearInterval(st);" onmouseout = "keepMove();">
    <a>这里是滚动的</a>
    </div>
    尤文 于 2008-4-23 10:01:03 回复
    我感觉这个方案只是在应付标准检测器(w3c validators),其本质上仍是使用的marquee的特效。
  • 2007-1-6 15:34:32 回复该留言
  • quote 6.greengnn
  • 遍历耗性能,来段简介的

    <div id="ccMarquee">
    <a href="#" >this is marquee</a>
    </div>
    <script type="text/javascript">
    if (document.getElementById("ccMarquee")){
    var a=document.getElementById("ccMarquee");
    a.innerHTML="<marquee direction=\"up\" height=\"60\" width=\"250\" scrolldelay=\"500\" vspace=\"2\" hspace=\"2\" onmouseout=\"this.start();\" onmouseover=\"this.stop();\">"+a.innerHTML+"</marquee>";
    }
    </script>
  • 2007-10-29 19:18:01 回复该留言
  • quote 7.振之
  • http://www.andymao.com/
  • 呵呵,谢谢建斌提供一个解决方案。
    我个人认为,高度、宽度都应该由CSS来管理,JS去管理不太好,并且我主张用class,因为我们不能保证在整版页面中只使用一个滚动。
  • 2007-10-29 19:34:01 回复该留言
  • quote 8.greengnn
  • 同意分离,呵呵,随手写了一个图方便,因为我用的时候aoao写的那段和其他的JS冲突了,而且不喜欢遍历,所以就修改了
  • 2007-11-6 14:46:44 回复该留言
  • quote 10.火狐
  • 觉得你们真是白痴的想法,既然3C从来没有采用过marquee,干吗还要用,虽然说3C没有反对大家使用,但是3C是标准,这些不支持的标签迟早都会被浏览器淘汰,哪怕是发明者本身(微软迟早也会),不然3C就没有存在的意义了
  • 2008-4-10 14:58:42 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog .Theme from Google黑板报 By Washun

Copyright 2005-2007 Andymao.com. All Rights Reserved.

Search

最新评论及回复

最近发表