JavaScript+jQuery网页特效设计实例教程 陈承欢 单元3 设计文字类网页特效新.pptVIP

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-3 JavaScript实现网页状 态栏中的文字呈现打字效果 【任务描述】 让网页状态栏中的文字呈现打字效果，以吸引浏览者的注意力。 任务3-4 JavaScript实现网页文字滚动与等待的交替效果 【任务描述】 在网页中实现向上滚动网页文字，并且呈现滚动与等待的交替效果，其外观效果如图3-6所示。 图3-6　网页文字滚动与等待的交替效果 任务3-5 JavaScript实现鼠标滑过动态改变显示内容及外观效果 【任务描述】 当鼠标指针指向网页中的公告信息时，动态改变显示内容及外观效果，其外观效果如图3-7所示。 图3-7　鼠标滑过动态改变显示内容及外观效果 任务3-6 JavaScript实现文本围绕鼠标旋转 【任务描述】 在网页中实现文本围绕鼠标旋转的效果，如图3-8所示。 图3-8　在网页中实现文本围绕鼠标旋转的效果 任务3-7 jQuery实现网站动态信息滚动与等待的交替效果 【任务描述】 在网页中实现向上滚动网站动态信息，并且呈现滚动与等待的交替效果。 其外观效果如图3-9所示。 图3-9　向上滚动网站动态信息 【同步训练】 任务3-8 JavaScript实现网站公 告信息连续向上滚动 【任务描述】 在网页中实现网站公告信息连续向上滚动的效果，如图3-10所示。 图3-10　实现网站公告信息连续向上滚动 任务3-9 jQuery实现循环滚动网页中的文字 【任务描述】 在网页0308.html中实现循环滚动文字内容的效果，其外观如图3-11所示。 图3-11　实现循环滚动网页中的文字 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 单元3 设计文字类网页特效 任务3-1 JavaScript实现滚动网 页标题栏中的文字 任务3-2 jQuery实现向上滚动网 站促销公告 【知识必备】 3.1　JavaScript的循环语句 如果希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的，循环可以将代码块执行指定的次数。 1．while循环 While循环会在指定条件为真时循环执行代码块，只要指定条件为true，循环就可以一直执行代码。 2．do…while循环 do…while循环是while循环的变体，该循环在检查条件是否为真之前会执行一次代码块，然后如果条件为真的话，就重复这个循环。 3．for循环 （1）表达式1。 通常使用表达式1来初始化循环中所用的变量（var i=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语句跳出循环后，会继续执行该循环之后的代码