第11章 复杂的跑马灯.pptVIP

第11章 复杂的跑马灯 上一章讲述了在HTML页面中，如何通过JavaScript实现用户和表单的互动。与将所有任务都由服务器端计算完成相比，JavaScript实现的表单互动有着反应快速，节约服务器资源，用户体验好等优点。JavaScript可以实现的互动远不止操作表单元素这么简单，另一种常见的应用就是使用JavaScript操作页面元素的样式。 11.1 示例：一个向左弹性滑入，向上滑出的跑马灯 在初学HTML的时候，读者想必已经学习过如何使用“marquee”标记来实现跑马灯的效果。然而随着标准化的推行，在xHTML1.1中，“marquee”不再被认为是一个合法的HTML标记，这就要求页面设计者寻找一种可以替代“marquee”标记的办法。另一方面，有时设计师需要一些比较复杂的滚动效果，例如元素自右向左滑入，然后再向上滑出，这样的效果也不是简单的“marquee”标记可以实现的。 11.2 用JavaScript控制内联CSS CSS 是“Cascading Style Sheet”的缩写，译作“层叠样式表单”。是用于控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。 为了便于理解JavaScript和CSS的关系，需要理解CSS和HTML的结构。在HTML页面中使用CSS有三种方式：外部样式表、内部样式块和内联样式。可以先建立外部样式表文件（.css），然后使用HTML的link对象，将其嵌入HTML页面中，称为外部样式表，例如： !-- 外部样式表 -- link rel=stylesheet href=样式表URL.css type=text/css / 或者可以在HTML文档的“HTML”和“BODY”标记之间插入一个“STYLE.../STYLE”块对象（此样式块通常放置在“HEAD”标记内），称为内部样式块，例如： !-- 内部样式块 -- head title文档标题/title style type=text/css body { color:red; } /* 样式表内容 */ /style /head 11.2.1 CSS名称和JavaScript属性的对应 JavaScript中，HTML元素的内联样式被放置在该对象的“style”集合内，调用的示例如下： div style=”color:red;” id=”hutia”This is a text division./div script var obj = document.getElementById(“hutia”); alert(obj.style.color); /script 11.2.2 内联CSS样式的读取 绝大多数的“style”属性都是字符串型的。如果试图获取一个未设置的CSS属性，则返回一个空的字符串（“”””）。如果试图获取“style”集合中一个不存在的属性，则返回“未定义”（“undefined”）,例如： div style=”color:red;” id=”hutia”This is a text division./div script var obj = document.getElementById(“hutia”); alert(“1:” + obj.style.color + “\r\n2:” + obj.style.fontSize + “\r\n3:” + obj.style.hutia); /script 11.2.3 内联CSS样式的设置和单位 需要改变CSS样式的时候，只需要将“style”集合的属性当作一般的变量，对其进行赋值操作即可。值得注意的是，赋值的内容必须符合要求，否则将会造成如上图11.5所示的“参数无效”类型的错误。 对于某些数值型的CSS样式，例如“style.left”，在“Internet Explorer”浏览器中，可以直接赋值以数字，例如： document.getElementById(“hutia”).style.left = 500; 此时的长度单位会采取默认值“px”。然而在很多其他“要求严格”的浏览器中（例如“Fire Fox”浏览器），上述的用法就是错误的，必须给该属性赋以带单位的数值。因此，强烈建议读者在设计书写代码的时候给数值加上单位，以避免兼容性的问题。 11.2.4 示例：放大缩小文字 需要强调的是，由于JavaScript这种语言是为了HTML页面而设计的，必然离不开表现的部分，因此牢固掌握CSS的各个属性是JavaScript程序员的基本功之一。这里由于本书的定向和篇幅所限，不可能非常详细的解说每一条CSS属性及其应用，希望CSS基础不是很好的读者能够在CSS方面多下一些功夫。有时，有些功能用CSS来实现要比用JavaS