单元3-设计文字类网页特效

单元3设计文字类网页特效任务3-1JavaScript实现滚动网页标题栏中的文字任务3-2jQuery实现向上滚动网站促销公告

【知识必备】 3.1

JavaScript的循环语句

如果希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的，循环可以将代码块执行指定的次数。1．while循环 While循环会在指定条件为真时循环执行代码块，只要指定条件为true，循环就可以一直执行代码。2．do…while循环 do…while循环是while循环的变体，该循环在检查条件是否为真之前会执行一次代码块，然后如果条件为真的话，就重复这个循环。3．for循环

（1）表达式1。

通常使用表达式1来初始化循环中所用的变量（vari=0）。表达式1是可选的，也就是说，不使用表达式1也可以。可以在表达式1中初始化任意（或者多个）值。

（2）表达式2。

通常表达式2用于判断条件是否成立，表达式2同样是可选的。如果表达式2返回true，则循环再次开始，如果返回false，则循环将结束。

（3）表达式3。

通常表达式3会增加初始变量的值。表达式3也是可选的，表达式3有多种用法。增量可以是负数（i--），或者更大（i=i+15）。4．for…in循环 JavaScript的for…in语句用于循环遍历对象的属性，for…in循环中的代码块将针对每个属性执行一次。5．比较while循环和for循环

使用while循环来显示num数组中的所有值。6．break语句

在单元2学习switch()语句时已经见到过break语句，它用于跳出switch()语句。 break语句也可用于跳出循环，break语句跳出循环后，会继续执行该循环之后的代码（如果有的话）。7．continue语句 Continue语句用于跳过循环中的一个迭代。

如果出现了指定的条件，就继续执行循环中的下一个迭代。8．JavaScript标签

可以对JavaScript语句进行标记，如需标记JavaScript语句，则在标签名称后加上冒号。3.2

HTMLDOM（文档对象模型）

文档对象模型（DocumentObjectModel,DOM）是用以访问HTML元素的正式W3C标准，HTMLDOM定义了访问和操作HTML文档的标准方法，通过HTMLDOM，可以访问HTML文档的所有元素。 HTMLDOM独立于平台和语言，可被任何编程语言使用，如Java、JavaScript和VBscript。1．查找HTML元素

通常，JavaScript需要操作HTML元素。

为此，必须首先找到该元素。

（1）通过id查找HTML元素。

（2）通过标签名查找HTML元素。

（3）通过类名找到HTML元素。

2．改变HTML元素的内容 HTMLDOM允许JavaScript改变HTML元素的内容，修改HTML内容最简单的方法

是使用innerHTML属性。3．改变HTML元素的属性4．改变HTML元素的样式5．创建新的HTML元素6．删除已有的HTML元素3.3

JavaScript的位置与尺寸方法3.3.1网页元素的宽度和高度尺寸1．浏览器窗口的尺寸大小和网页的尺寸大小（1）innerWidth和innerHeight属性。（2）clientWidth和clientHeight属性。2．屏幕分辨率的高和宽 window.screen.height用于获取屏幕分辨率的高度，window.screen.width用于获取屏幕分辨率的宽度。3．屏幕可用工作区的高度和宽度 window.screen.availHeight用于获取屏幕可用工作区的高度， window.screen.availWidth用于获取屏幕可用工作区的宽度。3.3.2网页元素的位置1．offsetLeft和offsetTop属性2．scrollLeft和scrollTop属性3．screenTop和screenLeft属性4．getBoundingClientRect()方法3.3.3通过网页元素的样式属性style获取或设置元素的尺寸和位置

通过网页元素的样式属性style可以获取或设置元素的长度、宽度、上边界（元素与页面顶边界的距离）、左边界（元素与页面左边界的距离）和颜色等属性。1.style.left2.style.pixelLeft3.style.posLeft3.4

jQuery的选择器 jQuery的选择器就是“选择某个网页元素，然后对其进行某种操作”，使用jQuery的第一步，往往就是将一个选择表达式放进构造函数jQuery()（简写为$），然后得到被选中的元素。 jQuery的选择器允许对元素组或单个元素进行操作。 jQuery元素选择器和属性选择器通过标签名、属性名或内容对HTML元素进行选择。 jQuery使用CSS选择器来选取HTML元素，使用路径表达式来选择带有给定属性的元素。3.5

jQuery的链式操作 jQuery有一种名为链接（chaining）的技术，允许用户在相同的元素上运行多条jQuery命令，允许将所有操作连接在一起，以链条的形式写出来。

链接是一种在同一对象上执行多个任务的便捷方法。 jQuery会抛掉多余的空格，并按照一行长代码来执行上面的代码行。

这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，只需简单地把该动作追加到之前的动作上。

链式操作是jQuery最令人称道、最方便的地方。

它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。3.6

jQuery的效果方法 jQuery的效果主要包括隐藏、显示、切换、淡入淡出、滑动和动画效果等。

许多jQuery函数涉及动画，这些函数也许会将speed或duration作为可选参数。 speed或duration参数可以设置许多不同的值，如“slow”、“fast”、“normal”或毫秒。1．实现页面元素的隐藏和显示效果（1）jQuery的hide()方法和show()方法。（2）jQuery的toggle()方法。2．实现页面元素的淡入淡出效果（1）jQuery的fadeIn()方法。（2）jQuery的fadeOut()方法。（3）jQuery的fadeToggle()方法。（4）jQuery的fadeTo()方法。3．实现页面元素的滑动效果（1）jQuery的slideDown()方法。（2）jQuery的slideUp()方法。（3）jQuery的slideToggle()方法。4．实现页面元素的动画效果（1）jQuery的animate()方法。（2）使用animate()方法操作多个属性。（3）使用相对值实现动画效果。（4）使用预定义的值实现动画效果。（5）使用队列功能实现动画效果。5．停止动画 jQuery的stop()方法用于在动画或效果完成前对它们进行停止。 stop()方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。6．jQuery的Callback函数

【引导训练】任务3-3JavaScript实现网页状态栏中的文字呈现打字效果

【任务描述】

让网页状态栏中的文字呈现打字效果，以吸引浏览者的注意力。任务3-4JavaScript实现网页文

字滚动与等待的交替效果

【任务描述】

在网页中实现向上滚动网页文字，并且呈现滚动与等待的交替效果，其外观效果如图3-6所示。图3-6网页文字滚动与等待的交替效果任务3-5JavaScript实现鼠标滑过动态改变显示内容及外观效果

【任务描述】

当鼠标指针指向网页中的公告信息时，动态改变显示内容及外观效果，其外观效果如图3-7所示。图3-7鼠标滑过动态改变显示内容及外观效果任务3-6JavaScript实现文本围绕鼠标旋转

【任务描述】

在网页中实现文本围绕鼠标旋转的效果，如图3-8所示。图3-8在网页中实现文本围绕鼠标旋转的效果任务3-7jQuery实现网站动态信息滚动与等待的交替效果

【任务描述】

在网页中实现向上滚动网站动态信息，并且呈现滚动与等待的交替效果。

其外观效果如图3-9所示。图3-9向上滚动网站动态信息

【同步训练】

任