用JavaScript搭建动态效果.pptVIP

11.1JavaScript概述 JavaScript脚本语言由于其具有简单性、安全性、动态性、跨平台性等诸多优点，所以它迅速在众多脚本语言中脱颖而出，被越来越多的Web设计者认可和使用。 我们需要注意JavsScript的基本语法规则。 我们所需要注意的有以下几点： 第一，JavaScript是严格区分大小写的，例如，abc和Abc是两个不同的符号。 第二，每条JavaScript执行语句的最后必须用英文的分号“;”来标识结束，而在编排方式上不必严格遵守一行一句的规则，只要有空格和分号等分隔符隔开就可以。一个单独的分号“;”表示一条空语句。 第三，JavaScript除了和各基本类型相对应的常量类型以外，还有两种特殊的常量：第一种是null常量，表示一个变量所指向的对象为空值；第二种就是undefined常量，表示变量还没有被赋值的状态或对象的某个属性不存在。JavaScript使用关键字“var”声明变量，JavaScript的变量属于弱类型的，在声明时不必确定类型，在使用或赋值时自动确定其数据类型。 第四，JavaScript的基本数据类型有四种：整型、实型、字符型和布尔型。 第五，在JavaScript中有三种运算符：算术运算符，分双目和单目运算符两种，双目运算符包括：“+”（加）、“-”（减）、“*”（乘）、“/”（除）、“%”（取模）、“|”（按位或）、“”（按位与）、“”（左移）、“”（右移）、“”（右移，零填充）；单目运算符包括：“-”（取反）、“~”（取补）、“++”（递加1）、“--”（递减1）。 比较运算符，包括：“”（小于）、“”（大于）、“=”（小于等于）、“=”（大于等于）、“==”（等于）、“!=”（不等于）。逻辑布尔运算符，包括：“!”（逻辑非）、“||”（逻辑或）、“”（逻辑与）、“^”（逻辑异或）、“=”（与之后赋值）、“|=”（或之后赋值）、“^=”（异或之后赋值）、“?:”（三目操作符）。 11.1.2 JavaScript嵌入HTML文档 JavaScript代码要嵌入HTML中使用，从而实现Web网页的交互能力。在HTML文档中嵌入JavaScript代码主要有以下两种方法： 第一种方法，将JavaScript代码直接编写在script/script标签中间，注意不能将JavaScript语句直接嵌入HTML文档中，也不能将HTML标记放进script/script标签之间。 第二种方法，将JavaScript代码写到其他文件，在HTML通过引用，导入Javascript文件。 11.2 用JavaScript设置图片的效果 通过javascript，我们能实现CSS达不到的一些动态效果，这里我们将讲述一些比较常见的图片效果，包括相册和切换等。大家可以通过在自己的页面上改编这些代码，让自己的网站更绚丽多彩。 11.2.1实现相册效果 图片相册是一些网站里能经常见到的效果，一般是由大图展示图和缩略图两个部分组成。通过鼠标在缩略图上移动，大图展示区里的图片也能变化。 11.2.2实现图片滑动切换效果 在一个页面里，如果只有很小的篇幅能供图片展示，那么用“滑动切换”的方式来展示，那么是一个不错的选项。 11.3针对菜单的效果 如果一个页面里包含的要素比较多，那就需要用一些菜单来实现导航的效果。 用CSS最多实现含有“鼠标悬浮效果”的静态菜单，但这个需求已不足以满足当前的页面美观需求，这里我们将通过一些例子，向大家详细说明用JavaScript开发菜单效果的方法。 11.3.1用JavaScript实现页签效果 在Windows编程里，我们经常能看到页签的效果，在HTML页面里，我们也能通过JavaScript的代码，实现这类效果。 11.3.2用javascript实现下拉式菜单 在一个网页里，如果需要导航的部分比较多，那么我们就可能会用到两级菜单，这里我们通过JavaScript给出一个二级菜单的效果 11.3.3用JavaScript实现滑轮式菜单效果 在一些网站里，我们也能经常看到一些滑轮式菜单的效果，如下图所示，其中，当鼠标移动到“图书类”或者是“玩具”上，会出现下方文字变换的效果。 11.4针对文字的效果 在网页里，如果单纯用静态的文字效果，未必能具有很大的吸引性，所以我们可以通过JavaScript，设计一些针对文字的动态效果，从而让网页具有更大的美观性。 11.4.1文字的打字效果 文字的打字效果就是由我们设计好要显示的文字，然后再通过JS给逐一的显示出来。下面就是一个文字闪动的例题 11.4.2带提示文字的JavaScript特效 在页面上，我们经常会看到这样的效果：当我们把鼠标移动到文字上的时候，自动会提示效果，如下图所示。