用JavaScript搭建动态效果.ppt

第11章用JavaScript搭建动态效果
在网页里,如果我们引入动态的效果,那么会让网页能吸引更多人的眼球,在前文里,我们用到的a:hover这种伪标签确实也能实现鼠标停留的动态效果。
不过,通过CSS能实现的动态效果是非常有限的,在开发网页的时候,我们还可以通过JavaScript来实现一些动态的效果
在这个章节里,我们主要讲述如下的重点:
JavaScript的知识点概述
用JavaScript实现针对图片效果的样式
用JavaScript实现针对菜单效果的样式
用JavaScript实现针对文字效果的样式

JavaScript脚本语言由于其具有简单性、安全性、动态性、跨平台性等诸多优点,所以它迅速在众多脚本语言中脱颖而出,被越来越多的Web设计者认可和使用。
我们需要注意JavsScript的基本语法规则。
我们所需要注意的有以下几点:
第一,JavaScript是严格区分大小写的,例如,abc和Abc是两个不同的符号。
第二,每条JavaScript执行语句的最后必须用英文的分号“;”来标识结束,而在编排方式上不必严格遵守一行一句的规则,只要有空格和分号等分隔符隔开就可以。一个单独的分号“;”表示一条空语句。
第三,JavaScript除了和各基本类型相对应的常量类型以外,还有两种特殊的常量:第一种是null常量,表示一个变量所指向的对象为空值;第二种就是undefined常量,表示变量还没有被赋值的状态或对象的某个属性不存在。JavaScript使用关键字“var”声明变量,JavaScript的变量属于弱类型的,在声明时不必确定类型,在使用或赋值时自动确定其数据类型。
第四,JavaScript的基本数据类型有四种:整型、实型、字符型和布尔型。
第五,在JavaScript中有三种运算符:算术运算符,分双目和单目运算符两种,双目运算符包括:“+”(加)、“-”(减)、“*”(乘)、“/”(除)、“%”(取模)、“|”(按位或)、“&”(按位与)、“<<”(左移)、“>>”(右移)、“>>>”(右移,零填充);单目运算符包括:“-”(取反)、“~”(取补)、“++”(递加1)、“--”(递减1)。
比较运算符,包括:“<”(小于)、“>”(大于)、“<=”(小于等于)、“>=”(大于等于)、“==”(等于)、“!=”(不等于)。逻辑布尔运算符,包括:“!”(逻辑非)、“||”(逻辑或)、“&&”(逻辑与)、“^”(逻辑异或)、“&=”(与之后赋值)、“|=”(或之后赋值)、“^=”(异或之后赋值)、“?:”(三目操作符)。
JavaScript嵌入HTML文档
JavaScript代码要嵌入HTML中使用,从而实现Web网页的交互能力。在HTML文档中嵌入JavaScript代码主要有以下两种方法:
第一种方法,将JavaScript代码直接编写在<script></script>标签中间,注意不能将JavaScript语句直接嵌入HTML文档中,也不能将HTML标记放进<script></script>标签之间。
第二种方法,将JavaScript代码写到其他文件,在HTML通过引用,导入Javascript文件。
用JavaScript设置图片的效果
通过javascript,我们能实现CSS达不到的一些动态效果,这里我们将讲述一些比较常见的图片效果,包括相册和切换等。大家可以通过在自己的页面上改编这些代码,让自己的网站更绚丽多彩。

图片相册是一些网站里能经常见到的效果,一般是由大图展示图和缩略图两个部分组成。通过鼠标在缩略图上移动,大图展示区里的图片也能变化。