第6讲 制作变换的图像特效

网页特效第6讲制作变换的图像特效课前引入前面我们学习了JavaScript一般变量的使用方法，如varx=1;、Vary=x+1;、Varmeg=“心有千千结”等，这些变量有一个共同的特点，就是一般用于保存一个数据，使用时也是针对一个数据值。在实际应用中，有时需要储存、传递一组不同类型的数据，如桌子有长、宽、高3个属性，日期有年、月、日3个方面等。这些就涉及到JavaScript一种特殊数据类型——对象。主要内容什么是对象1定义对象2使用对象34项目展示展示：变换的图像特效项目分析sas.ued.FlashObject=function(swf,id,w,h,ver,c,useExpressInstall,quality,xiRedirectUrl,redirectUrl,detectKey){if(!document.createElement||!document.getElementById)return;this.DETECT_KEY=detectKey?detectKey:'detectflash';this.skipDetect=sas.ued.util.getRequestParameter(this.DETECT_KEY);this.params=newObject();this.variables=newObject();this.attributes=newArray();this.useExpressInstall=useExpressInstall;if(swf)this.setAttribute('swf',swf);if(id)this.setAttribute('id',id);……知识讲解与演示——对象什么是对象JavaScript的对象就是一种特殊的数据类型，它不仅可以保存一组不同类型的数据（称做“对象的属性”），而且还可以包含有关“处理”这些数据的函数（称做“对象的方法”）。知识讲解与演示————对象JavaScript的对象包含下述3种。（1）JavaScript的内置对象。•JavaScript已定义了一些对象用于处理数据，如string、Array等。（2）浏览器内置对象。•不同的浏览器都提供了一组描述其浏览器结构的内置对象，JavaScript中提供了丰富的有关浏览器对象的属性和方法，利用这些对象可以对网页浏览器环境中的事件时进行控制并作出处理。（3）自定义对象。•JavaScript还提供了自定义对象的方法，其中包括定义对象的属性和方法。知识讲解与演示————对象定义对象方法一：Function对象名(［参数1，参数2，……］)｛This.属性名1［=初始值］;This.属性名2［=初始值］;……This.方法名1=function方法函数名1（［参数i，参数ii，……］）{……}This.方法名2=function方法函数名2（［参数a，参数b，……］）{……}……｝知识讲解与演示————对象定义对象方法二：Function对象名(［参数1，参数2，……］)｛This.属性名1［=初始值］;This.属性名2［=初始值］;……This.方法名1=方法函数名1This.方法名2=方法函数名2……}function方法函数名1（［参数i，参数ii，……］）{……}function方法函数名2（［参数a，参数b，……］）{……}｝演示——定义对象定义日期对象FunctiondateObj(year,month,day){//属性This.year=year;this.month=month;This.day=day;//方法This.toString=functiongetString(){Return(this.month+‘/’+this.day+’/’+this.year)}}特殊运算符运算符意义示例delete删除对象或对象中的元素new创建对象实例this引用当前对象typeof数据类型运算符typeof(20)结果为numbervoid无返回值运算符知识讲解与演示————使用对象知识讲解与演示————使用对象1．创建对象语法格式：var对象变量名=new自定义对象名如：VarmyDate=newdateObj(“2010”,”11”,”8”)知识讲解与演示————使用对象2．使用对象的属性（1）通过圆点（.）运算符。语法规则：对象名.属性名如：varmyMonth=myDate.month;结果为11（2）通过属性名。语法规则：对象名［“属性名”］如：varmyMonth=myDate［“month”］;结果为11知识讲解与演示————使用对象2．使用对象的属性（3）通过循环语句。语法规则：for(var变量in对象变量）｛……对象变量[变量]……｝如：document.write(‘“myDate”中有以下属性：’＋‘br’);For(variteminmyDtae){Document.write(item+’:’+myDate[item]+‘br’)}知识讲解与演示————使用对象2．使用对象的属性（4）通过with语句。语法规则：With(对象变量)｛……直接使用对象属性名、方法名……｝如：with(myDate){varmyMonth=month;VarmyDateStr=toString();Document.write(“新产生的日期对象的月份是：”+myMonth+”br”+myDateStr+”br”);}知识讲解与演示————使用对象3．使用对象的方法使用with语句或.语法规则：•对象变量名.对象方法名（）如：•varmyDateStr=myDate.toString();知识讲解与演示————使用对象4．对象作为函数的参数语法规则：•funtion函数名（对象名）{•……•｝•如：•funtionpreMonth(date)•{•If(date.month==1{•Date.year--;date.month=12•else{•Date.month--;•}•}•｝课堂模仿1.完成教师演示内容。知识讲解与演示——分析变换的图像特效调用外部JavaScript程序语法规则：•scriptsrc=“文件名及路径type=text/javascript/script如：•scriptsrc=js/sohuflash.jstype=text/javascript/script知识讲解与演示——分析变换的图像特效varvarText=functionaddInfo(title,photourl,link){if(varText!=){varText+=|||;}varText+=title+|_|+photourl+|_|+link;}addInfo(一四姑娘山之夏,image/四姑娘山之夏.jpg,#);addInfo(二来古冰川,image/来古冰川.jpg,#);addInfo(三川藏线地图,image/川藏线地图.jpg,#);addInfo(四奔波寺|蚌普寺,image/奔波寺(蚌普寺).jpg,#);addInfo(五黄龙风光,image/黄龙风光.jpg,#);addInfo(六甘孜寺的坛城,image/甘孜寺的坛城.jpg,#);varsohuFlash2=newsohuFlash(js/FlashFocus.swf,sasFlashFocus3,400,200,5);sohuFlash2.addParam(quality,high);sohuFlash2.addParam(wmode,transparent);sohuFlash2.addVariable(info,varText);sohuFlash2.write(sasFlashFocus3);课堂模仿修改图像变换特效中代码，使其显示自己的图片。课堂实践熟悉图像变换特效中代码。课外拓展搜索“图片横向滚动”特效代码，分析程序，并尝试运行程序，观察效果。网页特效