第11章JavaScript中的图像和动画Word文档下载推荐.docx
《第11章JavaScript中的图像和动画Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《第11章JavaScript中的图像和动画Word文档下载推荐.docx（15页珍藏版）》请在冰豆网上搜索。
]>
imgName=newimage（[pixelWidth,pixelHeight]）;
其中image对象的属性有：
❑border：
设置image对象的边框；
❑height：
设置image对象的高度；
❑width：
设置image对象的宽度；
❑name：
设置image对象的名称；
❑hspace：
设置image对象与文本之间的垂直距离；
❑vspace：
设置image对象与文本之间的水平距离；
❑complete：
图像显示完成的标志；
❑lowsrc：
image对象加载前，设置较低分辨率的图像替代image对象；
❑src：
装入新图像来替换当前显示的图像。
image对象的方法有：
❑onAbort：
用户加载图像时单击停止按钮失败时触发的事件；
❑onError：
网络或服务器故障导致图像传输失败时触发该事件；
❑onLoad：
当图像的lowsrc图像加载完毕或没有指定lowsrc属性的图像且src图像加载完毕或动态Gif图片的每一帧都已出现时触发该事件。
获取图像属性或方法的使用语法如下：
[window.]document.imageName.property|method（[parameter]）
[window.]document.image[index].property|method（[parameter]）
下面代码解释了如何使用img元素。
imgsrc=”1.jpg”alt=”没有找到图片”height=”32”width=”87”style=”float:
left”/>
该元素的src属性指定了请求的图像的URL。
img元素上的alt属性指定了一段文本，如果浏览器无法显示图像，则显示这段文本，该文本应该是描述性信息。
src和alt属性都是必须的。
可选的height和width属性可用于告诉浏览器缩放图像，使之不同于记录的大小。
为width或height属性指定的值默认会被解释为一个以像素为单位的长度。
以像素为单位指定一个长度的另一种方法是将其指定为浏览器客户区的高度或宽度的一个百分比。
如下标记：
imgheight=”5”width=”100%”/>
说明：
像素是图像元素的简称，表示显示器上的一个点。
典型的显示器是由这样的点的网格组成的，在显示器上通过以特定的颜色显示每个点来显示一幅图像。
显示器的分辨率是通过像素来指定。
11.1.2image对象的使用示例
示例11-1展示了一个图片的闪烁效果，其代码如下。
【示例11-1】图片的闪烁效果
html>
<
head>
title>
闪烁的图片<
/title>
/head>
bodyonload="
blink（）"
>
//当载入图片时调用blink函数
scripttype="
text/javascript"
functionblink（）//定义blink函数
{
pic.style.visibility=（pic.style.visibility=="
hidden"
）?
"
visible"
:
;
//设置图片的可见与否
setTimeout（"
100）;
//设置调用函数的时间间隔
}
/script>
divid="
pic"
//定义层
form>
imgsrc="
01.gif"
border="
0"
width="
180"
//创建image对象
/form>
/div>
/body>
/html>
代码说明：
❑图片的闪烁效果主要是利用“style.visibility”属性来表示元素的可见性。
当其为visible时，为可见；
当其为hidden时，为隐藏。
❑奇数次调用blink（）函数时，为hidden值，图片隐藏；
偶数次调用blink（）函数时，为visible值，显示图片。
❑setTimeout（）函数是每隔0.1s调用一次blink（）函数以实现sytle.visibility值的交替变化。
该程序运行效果如图11-1所示。
图11-1闪烁的图片
示例11-2展示了如何实现图片的自动切换
【示例11-2】图片的自动切换
图片的自动切换<
javascript"
varimg=newArray
（2）;
//创建一维数组
varnums=0;
if（document.images）
for（i=0;
i<
2;
i++）
img[i]=newImage（）;
//创建对象实例
img[i].src="
pic/"
+i+"
.jpg"
//设置所有图片的路径及图片名
functionchange（）//设置图片的切换
nums++;
document.images[0].src=img[nums].src;
if（nums==2）
nums=0;
functionav（）//反复不断地调用change函数
setInterval（"
change（）"
1000）;
bodyonload=av（）>
pic/1.jpg"
border=0width=120>
br>
❑该程序首先建立一个图像数组；
❑然后设置一组图片的路径、文件名和后缀名；
❑接着创建change（）函数用来切换图片，每调用一次函数就切换一次图片，当切换到最后一张图片时就跳到第一张图片。
❑最后定义av（）函数，该函数中使用到setInterval（）函数，用来由用户自己定义时间间隔。
该程序运行效果如图11-2-a和11-2-b所示。
图11-2-a图片1图11-2-b图片2
注意：
setInterval（）是创建一个动作连续不断地调用执行函数，和setTimeout（）在延迟一段时间后执行一次，然后就停止。
11.2创建动画的三种方式
动画是通过连续播放的一系列画面，给视觉造成连续变化的画面。
其基本原理与电影、电视一样，都是视觉原理。
JavaScript创建动画的方式有好几种，如DirectAnimation，Layer控件，Sequencer控件，Path控件等，本节将详细介绍这几种创建动画的方式。
11.2.1DirectAnimation
IE浏览器提供了很多例程和方法库用来提供动画和多媒体。
微软提供的多媒体控件包括DAViewerControl控件、Path控件、Sequencer控件、Sprite控件及结构化图像控件等。
DAViewerControl控件的方法和属性如表11-1所示。
表11-1DAViewerControl方法和属性
方法
AddBvrToRun
ShowWhatsThis
Drag
SetFocus
Move
Start
Zorder
属性
BackgroundImage
Object
Container
Parent
DragIron
PixelLibrary
DragMode
Sound
Height
TabStop
Image
ToolTipText
Name
Width
MeterLibrary
WhatsThisHelpID
Left
Visible
InputImage
UpdateInterval
HelpContextID
Tag
DirectAnimation提供了两个例程扩展库供用户使用：
PixelLibrary库和MeterLibrary库。
前者所有例程的度量值方法用像素点；
后者的度量方法是米。
在DirectAnimation中将图像画在画板上，因此可以用MeterLibrary的方法NewDrawingSurface（）来创建此画板，其使用语法如下所示：
vardrawingboard=MeterLibrary.NewDrawingSurface（）;
DirectAnimation控件的属性如表11-2所示。
表11-2DirectAnimation控件的属性
说明
CoordinateSystem
设置坐标系统
DrawingSurface
设置返回DirectAnimation面板
ExtentHeight,ExtentWidth,
ExtentLeft,ExtentRight
设置该图像的高，宽，左，上值，以像素为单位
HighQuality
返回vanti-aliasing开关状态
用DirectAnimationDAImage填充结构化图形形状
Library
用DirectAnimation库的参数
MouseEventsEnabled
设置或返回鼠标事件是否由结构化的图形对象处理
PreserveAspectRatio
设置或返回一个值，表明范围设置时是否保持屏幕纵横比
SourceURL
使用外部文件作为图像的原始描述
Transform
用DirectAnimationDAImage行为的对象转换
DirectAnimation控件支持的方法如表11-3所示。
表11-3DirectAnimation控件的方法
ARC
创建一个建档的圆弧或椭圆弧
FileSpline
创建一个封闭的由系列节点组成的锯齿形
Oval
创建一个椭圆
Pie
创建一个矩形中封闭的椭圆形
Polygon
创建一个封闭的多边形
PolySpline
创建一个锯齿形图形
Rect
创建一个矩形
RoundRect
创建一个椭圆形矩形
SetFillStyle
设置填充类型
SetFont
设置控件字体
SetGradientFill
指定梯度填充的始末点
SetHatchFill
指定填充是否透明
SetLineColor
设置线条颜色
SetLineStyle
设置线条样式
SetGranientShape
设置梯度图形为多边形轮廓
SetTextureFill
设置结构化图形主题源
Text
以当前字体和颜色创建一个字符串
DirectAnimation控件支持的事件如表11-4所示。
表11-4DirectAnimation控件支持的事件
事件
onClick
单击
ondbclick
双击
onMousedown
按下
onMouseMove
光标移动
onMouseOut
光标离开
onMouseOview
进入相关区域
onMouseUp
释放鼠标
下面代码展示了如何画一个黄色的矩形：
drawingBoard.FillColor（MeterLibrary.ColorRgb（1,1,0））;
drawingBoard.FillPath（MeterLibrary.Polyline（Array（0,0,400,0,400,400,0,400,0,0）））;
❑第一行代码是创建一个画板；
❑第二行代码设置画板的填充颜色；
❑第三行代码是使用Polyline（）方法来画一个矩形。
下面的代码展示了如何创建平移：
varstart=MeterLibrary.Point2（-2000,-1000）;
varend=MeterLibrary.Point2（2000,1000）;
varsweep=MeterLibrary.FollowPath（MeterLibrary.Line（start,end）,10）;
❑第一行代码首先调用Point2方法建立一个起点；
❑第二行代码调用Point2方法建立一个终点；
❑第三行代码使用Line方法在两点之间画一条直线，FollowPath方法是用来实现平移操作的。
下面代码展示了如何创建旋转：
varaxis=MeterLibrary.Vector3（20,20,20）;
varTwist=MeterLibrary.Rotate3RateDegrees（axis,180）.Duration（10）.ParallelTransform2（）;
❑第一行代码首先用Vector（）方法定义一个坐标轴；
❑第二行代码用Rotate3RateDegree（）和ParallelTransform2（）方法让图像在三维空间里旋转。
11.2.2使用Sequencer控件创建动画
Sequencer控件是IE浏览器中DirectAnimation控件提供的内置定时器，其主要是用来创建动作序列，Sequencer控件也可用来控制其他控件。
在网页中，是通过使用<
object>
标识来嵌入Sequencer控件的，其使用方法如下：
objectid=objectclassid=”clsid:
“<
/object>
Sequencer控件没有属性，其方法和事件如表11-5和表11-6所示。
表11-5Sequencer控件的方法
Play
启动停止的动作集
Pause
暂停当前位置的动作集
At
指定动作集中的新动作
Seek
将当前的重放位置设置为一个新的指定时间
Stop
停止动作集的重放，将重放位置设置为起点
表11-6Sequencer控件的事件
OnInit
序列发生器首次载入内存时发生
OnPause
在动作集重放被暂时发生
OnPlay
动作集启动重放时发生
OnSeek
Seek方法调用完成时发生
OnStop
动作集重放结束或被停止时发生
11.2.3使用Path控件来创建动画
Path控件是IE浏览器提供来指定一个HTML元素移动所要经过的路线，其play（）方法使该元素沿着此路径移动。
使用Path控件的语法如下：
objectid=objectName
classid=”clsid:
“
[<
paramname=”property”value=”setting”>
];
Path控件的属性、方法以及事件如表11-7，11-8，11-9所示。
表11-7Path控件的属性
AutoStart
确定是否在载入时启动该重放过程
Bounce
设置所走的路径
Direction
设置重放的方向
设置重放的时间
PlayState
返回DirectAnimation库的引用
Relative
确定Path控件是从当前位置启动还是从目标对象所在的绝对位置启动
Repeat
设置重放的循环次数
Target
设置演示路径重放的目标对象
Time
返回从路径起点开始已经过去的时间
TimeInterval
设置或返回路径更新经历多长时间
11-8Path控件的方法
AddTimeMaker
设置一个计时器
KeyFrame
关键帧
指定一个椭圆形的结构化图像作为路径
暂停播放
从当前开始播放
指定一组闭合线段作为路径
PolyLine
知道一组不闭合线段作为路径
指定一个矩形作为路径
将当前的重放位置设置为一个新的位置
Spline
指定齿条型路径
停止当前播放
表11-9Path控件的事件
OnMaker
计时器到达时该事件发生
当path控件重放暂停时发生
当path控件重放时发生
OnPlayMaker
当path控件重放过程中计时器到达时该事件发生
在一个Seek方法调用完成时发生
当Path控件重放停止时发生
示例11-3展示了一个使用Path控件的程序，其代码如下：
【示例11-3】Path控件的使用
Path控件的使用<
body>
center>
控制Path控件
/center>
formname=form1>
inputtype=buttonvalue="
开始"
onClick="
startAnimation（）"
//创建一个按钮事件，
imgid=pathimgsrc="
1.gif"
style="
position=absolute;
visiblity:
//创建一个图片
objectid="
pathControl"
//加入名为pathControl的Path控件
classid="
clsid:
8AD3067A-B3FC-11CF-A560-00A0C9081C21"
paramname="
Shape"
value="
PolyLine（10,305,190,280,155,255,130,230,100,205,75,185,95,165,130,135,160,110,200,100,200）"
Duration"
value="
10"
Target"
pathimg"
functionstartAnimation（）
{
document.all.pathImage.style.visibility="
//设置图片的属性，使该图片为可见
pathControl.Play（）//移动图片
}
❑先建立一个要使用的按钮和图像，将图像设置为不可见；
❑然后加入Path控件，起名为pathControl；
❑接着由参数Shape指定一条路径，该过程用到方法PolyLine（），同时必须将定义该路径所需点的数目以及每个点的具体坐标作为参数传给该方法，为指定图像在路径上的移动速度，程序使用Duration参数，将其设置为10，另外给Path控件指定一个目标对象，也就是在屏幕上移动的那个图像。
❑最后通过startAnimation函数来使图像可见。
该程序运行结果如图11-3所示。
图11-3Path控件示例
示例11-4展示了一个按钮动画的功能，打开该文档时出现一个图片，当鼠标移动到该图片上时，又出现另外一个图片，移开时又出现初始图片，点击该图片时，进入新浪网站，图片打不开时，出现文字：
HelloUser。
其代码如下。
【示例11-4】按钮动画
动画示例
functionmouseOver（）//该函数用来显示图片0.gif
document.b1.src="
pic/0.gif"
functionmouseOut（）//该函数用来显示图片1.gif
pic/1.gif"
ahref="
"
target="
_blank"
//图片的链接地址
imgborder="
alt="
HelloUser"
src="
name="
b1"
onmouseOver="
mouseOver（）"
onmouseOut="
mouseOut（）"
/>
/a>
❑onMouseOver事件的作用是告诉浏览器一旦鼠标悬浮于图像之上，浏览器就会执行该函数，该函数会把图片0.gif替换为图片1.gif;
❑onMouseOut事件的作用是告诉浏览器一旦鼠标离开图片，浏览器就会执行另外一个函数，该函数会重新载入原来的图片。
该程序效果如图11-4-a和1
升级会员 