JavaScript程序设计教程 第10章 综合设计实例--JavaScript特效制作.pdf

第10章 综合设计实例-JavaScript特效制作。0oOOO10.1 焦点幻灯片10.2 菜单导航10.3 Tab选项卡10.4 图片特效10.5 文字特效10.6 表单按钮特效10.7 小结o 10.1焦点幻灯片7 焦点幻灯片是媒体宣传过程中的一种推广方式，也称之为1焦点图。在一些网络门户网站的首页，将一些Logo图片或者宣 传内容图片做成幻灯片形式，带有一定的吸引性，能引起用户的注意，成为眼球的焦点，从而提升了网站的点击率。本节主 要讲解类似各网站的焦点图特效，内容是网页中这类特效的实际应用。OOQI 10.1.1案例实现僵克图片滤植数系F 本实例使用JavaScript制作一个实例，该实例能够展示焦点图片滤镜效果。涉及JavaScript语法如下：setTimeout()方法。setTimeout()有两种形式，分别是setTimeout(code,interval)SisetTimeout(func,interval,args)其中code是一个字符串；func()是一个函数；interval表示时 间，可以是延迟时间或者交互时间，以毫秒为单位。延迟时间是 T在载入后延迟指定时间后，去执行一次表达式，仅执行一次；交互时间是从载入后，每隔指定的时间就执行一次表达式。O主要代码如下:0 script type=text/javascript”var colors=new Array(red,#29 9 4fd,?”#c0bl89,#f2fd89,magenta,white);i function rainbow()o var el 二 document,all.racerX;；if(null=el.color)el.color=0;if(+el.color=二colors。length)el.color=0;o el.style,color 二 colorsel.color;window.tm=setTimeout(rainbow。，750);o、o网页显示效果如图10.1所示。图10.1焦点图片滤镜效果工 10.1.2实例实现鼠标滑入僵直图切换致系本实例使用JavaScript制作一个实例，该实例展示广告?图片左右滚动替换。主要莎及的JavaScript语法是document.1 getElementByld()方法。在window,onload事件的使用中,常常会看到document.O getElementByld。方法，虚方法常用于获取元素，其最初被定 义为HTML DO M接口的成员，之后在2级DO M中移入XML DO M接口 o document.getElementByld属于host对象，是一个方法。页面运行效果如图10.2所示。OOoo图10.2鼠标滑入焦点图切换效果10.2菜单导航O网页设计中菜单导航的运用尤其多，而菜单导航的种类也 是非常繁杂的，有横向多级导航菜单、竖排式多级导航菜单、树形菜单、多级联动菜单等。不同菜单导航能给网页设计带来 Q不一样的体验效果。t0.2.t实例制作22页面式导航悝本实例使用JavaScript制作一个类似QQ界面的网页导航栏,在网站或者B/S软件中增加这种效果的导航栏，对于增加页 面的友好性是很有好处的。本实例涉及JavaScript语法如下。(1)document.all.item,通过控件的名字定位控件，item。中是控件的名字。(2)document,all.itemsLayer,用于设置所有控件层的高 度、宽度等各种属性。(3)document.write。方法，用于向文档写入内容。网页显示效果如图10.3所示。导S谋单我的Android手彳匚一无绊设备大学同学 高中同学 初中同学 小学同学图10.3 QQ页面式导航栏效果o to.2.2实例制作京点式贤郴二公导赧本实例使用JavaScript制作一个类似京东的网页竖排导 o航栏。本实例涉及JavaScript语法如下。；1.document.getElementByld()方法在window,onload事件的使用中,常常会看到document.getElementByld。方法，铉方法常用于获取元素，其最初被 定义为HTML DO M接口的成员，之后在2级D0M中移入XML D0M接 口。document.getElementByld属于host对象，是一个方法。2.document,getE1 ementsByTagName()方法在window,onload事件的使用中,常常使用document,getElementsByTagName()方法，传回指定名称用元素集合，其用法与document.getElementByld类似。O网页显示效果如图10.4所示。账号管理 首页管理 产品管理 新闻管理 反馈管理 权限管理 功能管理管理修改密码修改用户名设置密保问题图10.4京东式竖排二级导航效果to.z.s实例制作涧博式,公送希菜卓本实例使用JavaScript实现类似淘宝网的多级选择菜单。涉及的JavaScript语法如下。1.fromCharCode()方法fromCharCode()方法可接受一个指定的Unicode值，然后返 回一个字符串。该方法是String的静态方法，字符串中的每个 字符都由单独的数字Unicode编码指定。2.event.srcElementevent.srcElement用于设置或获取触发事件的对象。引用 对象以后，该对象的任何属性都可以使用。网页显示效果如图10.5所示。请选择品牌 请选择折扣和服务 请邮价格区间 请选择材质与狼共舞I全球购|0-50棉50-120 麻蚕丝图10.5淘宝式多级选择菜单效果o10.3 Tab选项卡网页页面中最流行常用的Tab切换效果，包括滑动、单击切换，延迟切换及自动切换等多种效果。熟练运用这些Tab切 换效果可使页面体验性更佳。10.3.1实例实现单击切拱7M本实例使用JavaScript实现可通过鼠标单击切换Tab标签，涉及的JavaScript语法如下。d 1.document.getElementByld()方法在window.onload事件的使用中，常常会看到?document.getElementByld()方法，该方法常用于获取元素，其最初被定义为HTML DO M接口的成员，之后在2级DO M中移 入XML DO M接口。document.getElementByld属于host对象，O是一个方法。i 2.document,getElementsByTagName()方法在window,onload事件的使用中，常常使用document.getElementsByTagName()方法，传回指定名称的元素集合,其用法与document.getElementByld类似。厂、O网页效果如图10.6所示。实事 体育 新闻实事内容图10,6单击切换Tab效果to.s.z实例-实觇定时a劭切换74本实例使用JavaScript实现定时自动切换Tab标签，涉 及的JavaScript语法如下。1.document.getElementByld()方法在window,onload事件的使用中，常常会看到document.getElementByld()方法,该方法常用于获取元素，其最初被:定义为HTML DO M接口的成员，之后在2级DO M中移入XML DO M接口。document.getElementByld属于host对象，是一个方 法。?2.document,getElementsByTagName()方法i 在window,onload事件的使用中，常常使用document.getElementsByTagName()方法，传回指定名称的元素集合,其用法与document.getElementByld类似。oQOOO3.setinterval()方法setinterval()方法可按照以毫秒计算的周期来调用函数 或计算表达式。set Interval。方法会不停地调用函数，直到 clearinterval()终止定时或窗口被关闭。4.clearinterval()方法window,clearinterval()方法将取消由 set Interval()方法设置的定时器。setinterval()方法会不停地调用函数，直到clearinterval()终止定时或窗口被关闭。QoQ网页显示效果如图10.7所示。选项卡一 选项卡二 选项卡三 选项卡四 选项卡五选项卡四内容图10.7定时自动切换Tab效果oO10.4图片特效图片对于网页的重要性不言而喻，无论是门户网站，还是 产品网站，好的图片特效都会对所要推广的内容产生积极的影 响。以产品网站为例，对于网页设计师来说如何才能设计出满 足网页需要的图片，这对设计师的经验要求较高。本节主要讲 解一下实际应用中的图片特效，内容是网页中这类特效的实际 应用。1041实例实现图片放火植政事本实例使用JavaScript制作一个实例，该实例中鼠标移动到缩略图上时显示对应的动态大图。网页显示效果如图10.8所示。力图10.8图片放大镜效果oQOO1042案例实观图片a劭廉劭数系本实例使用JavaScript实现图片滚动展示效果，涉及的 JavaScript语法如下：InnerHTMLo几乎所有的元素都有InnerHTML属性，它是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML。网页显示效果如图10.9所示。OOQ图10.9图片自动滚动效果Qo 10.5文字特效在传统的网页设计观念中，网页上字体都是统一规范的 O网页的风格也是规规矩矩的。在特定情况下，混用一些字 体或者使用一些有特效的文字能够达到活跃界面气氛的效果,产生不受拘束的现代感。本节主要讲解网页中常用的文字 I特效。6 10.5.1案例实现文生闪劭致果本实例使用JavaScript制作闪动的波浪文字效果，涉及 的JavaScript语法如下。Q回1.parselnt()函数o parselnt()函数的语法是：parselnt(number,type),number为要转换的字符串，type表示进制类型，如果不指定 type,type值以O x开头时，为十六进制；以0开头且第二位 不为x,则认为是八进制。2.setTimeout()方法setTimeout()看两种形式，分别是setTimeout(code,interval)和setTimeout(func,interval,args),其中code)是一个字符串；func()是一个函数；interval表示时间，可以是延迟时间或者交互时间，以毫秒为单位。延迟时间是在?载入后延迟指定时间后去执行一次表达式，仅执行一次；交!互时间是从载入后每隔指定的时间就执行一次表达式。3.InnerHTML9 几乎所有的元素都有InnerHTML属性，它是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML。网页显示效果如图10.10所示。=欢迎分享 JavaScript图10J0文字闪动效果o，10.5.2实例实现惊劭变色的女与公毫Q本实例使用JavaScript实现滚动变色的文字效果，在效 果展示页面，可看到文字在交替变色显示，以吸引人的注意，涉及的JavaScript语法如下。0 1.document,write。方法 document.write()方法用于向文档写入内容。2.document,all?document.all是一个表示当前文档的所有对象的数组，A不仅包括页面上可见的实体对象，还包括一些不可见的对象，如HTML注释等。在document.all数组里，元素不分层次，是按照其在文档中出现的先后顺序，平行罗列的，所以可以 用数字索引来引用到任何一个元素。o?3.setTimeout()方法setTimeout()有两种形式，分别是setTimeout(code,interval)和setTimeout(func,interval,args),其中code 是一个字符串；func()是一个函数；interval表示舟间，可 以是延迟时间或者交互时间，以毫秒为单位。延迟时间是在 3载入后延迟指定时间后去执行一次表达式，仅执行一次；交 互时间是从载入后每隔指定的时间就执行一次表达式。QOQ网页显示效果如图10.11所示。请注意此段文字，部分文字染成红色，且红色循环移动。图10.11滚动变色的文字效果oT 10.6表单按钮特效 按钮的设置是网页中必不可少的，尤其是表单中。通过设置按钮可以使平淡无奇的页面变得更有活力。按钮虽小，作用巨大。按钮的样式、风格、事件等，对网页的整体效果 能起到画龙点睛的作用。可以说，小按钮大世界，能不能设置好按钮是考察一个JavaScript程序员，乃至网页设计师的?必要条件。本节主要讲解按钮类特效。OOoQOO10.6.1 实例实说越能麻劭本实例使用JavaScript制作一个实例，该实例能通过用户 在页面上选择不同的列表框内容，来显示不同的按钮，主要涉 及的JavaScript语法如下。Document.getElementByld()方法:在window。onload事件 的使用中，会经常使用到document.getElementByld。方法，铉 方法常用于获取元素，其最初被定义为HTML DO M接口的成员,O之后在2级D0M中移入XML D0M接口。document.getElementByld属于host对象，是一个方法。QOQo网页显示效果如图10.12所示。嫡1按钮2按钮3O按钮1 按钮1 按钮2 按钮2 按钮3 按钮3图10J2改变控件显示不同按钮效果10.6.2 实例-实现牖钦提尔二 本实例使用JavaScript展示两种不同的提示按钮，涉及的JavaScript语法如下。o 1.confirm。方法1 confirm。弹出的是确认框(确认、取消)，用户可以选择 单击“确定”按钮或者单击“取消”按钮。confirm。方法的返 回值为true或者false。该消息框与alert()的提示框相同，也 是模式对话框，用户必须在关闭该对话框后，才能进行后续操作。2.alert。方法T alert()方法弹出的是提示框(确定),该提示框提供了一个“确定”按钮让用户关闭该消息框，并且该消息框是模式对 话框，也就是说，用户必须先关闭该消息框然后才能继续进行?操作。alert()方法有一个参数，即希望对用户显示的文本字符 串。oQ主要代码叫下：script type=text/javascript”/*源出确认框和提示框*/function a()if(confirm(您确定要在此文本框内输入东西吗?)alert(后果十分严重！)；网页显示效果如图10.13和图10.14所示。QOOOQ此网页显示：x此网页显示：x您确定要在此文本框内直入东西吗?言果十分严重!皖IE取消明正0图10.13确认某个动作前的提示按钮效果1 图10J4确认某个动作前的提示按钮效果210.7小结JavaScript特效能很大程度地活跃网页气氛，对网页的 T亲和力产生积极的影响，为网页增加良好的视觉效果。】本章着重介绍了几种常见的网页特效，并逐个分析了这些特效的实现方法及展现效果。运用这些特效即可以实现丰富。多彩的网页效果，如能在素材选取和美工制作方面融入更多的 i创意，必将达到事半功倍的效果。OOQ喂S