1、单元7网页特效与制作商品详情页面HTML5+CSS3网页设计与制作实用教程 将JavaScript 程序嵌入HTML 代码中，对网页元素进行控制，对用户操作进行响应，从而实现网页动态交互的特殊效果，这种特殊效果通常称为网页特效。在网页中添加一些恰当的特效，使页面具有一定的交互性和动态性，能吸引浏览者的眼球，提高页面的观赏性和趣味性。 JavaScript 是一种基于对象和事件驱动的脚本语言。使用它的目的是与HTML 超文本标记语言一起实现网页中的动态交互功能。JavaScript 通过嵌入或调用在标准的HTML 语言中实现其功能，它与HTML 标记结合在一起，弥补了HTML 语言的不足，Jav
2、aScript 使得网页变得更加生动。 JavaScript 是一种脚本编程语言，它的基本语法与C 语言类似，但运行过程中不需要单独编译，而是逐行解释执行，运行快。JavaScript 具有跨平台性，与操作环境无关，只依赖于浏览器本身，对于支持JavaScript 的浏览器就能正确执行。本章导读The chapters introduction目录导航渐进训练任务 7-1 设计与制作电脑版商品详情页面0701.html探索训练 任务 7-2 制作触屏版商品详情页面0702.html 析疑解惑单元小结任务 7-1 设计与制作电脑版商品详情页面0701.html任 务 描 述任务 7-1 设计与制
3、作电脑版商品详情页面0701.html图7-1电脑版商品详情页面的整体浏览效果【任务7-1-1】规划与设计商品详情页面的布局结构任 务 描 述规划商品详情页面0701.html 的布局结构，并绘制各组成部分的页面内容分布示意图。编写商品详情页面0701.html 布局结构对应的HTML 代码。定义商品详情页面0701.html 主体布局结构对应的CSS 样式代码，以及布局结构各个局部结构对应的CSS 代码。【任务7-1-1】规划与设计商品详情页面的布局结构1规划与设计商品详情页面0701.html的布局结构任 务 实 施 商品详情页面0701.html 内容分布示意图如图7-2 所示。图7-2
4、商品详情页面内容分布示意图【任务7-1-1】规划与设计商品详情页面的布局结构 在站点“易购网”中创建文件夹“07 网页特效与制作商品详情页面”，在该文件夹中创建文件夹“0701”，并在文件夹“0701”中创建子文件夹“CSS”“image”和“js”，将所需要的图片文件拷贝到“image”文件夹中，将所需要的JavaScript 文件拷贝到“js”文件夹中。2创建所需的文件夹 在文件夹“0701”中创建网页文档0701.html。商品详情页面0701.html 布局结构对应的HTML 代码如表7-1 所示。3创建网页文档0701.html表7-1商品详情页面布局结构对应的HTML 代码01 0
5、2 03 04 HTML代码行号05060708 HTML代码行号【任务7-1-1】规划与设计商品详情页面的布局结构表7-1商品详情页面布局结构对应的HTML 代码091011121314151617181920212223 HTML代码行号242526272829303132333435363738 商品卖点 HTML代码行号【任务7-1-1】规划与设计商品详情页面的布局结构表7-1商品详情页面布局结构对应的HTML 代码394041424344454647484950515253 商品详细信息 推荐商品 HTML代码行号545556575859606162636465666768 同类热卖
6、商品 最近浏览过的商品 HTML代码行号【任务7-1-1】规划与设计商品详情页面的布局结构 在文件夹“CSS”中可创建样式文件main.css，在该样式文件定义CSS 代码，商品详情页面0701.html 主体布局结构对应的CSS 样式代码如表7-2 所示。4创建样式文件与编写CSS样式代码表7-2商品详情页面0701.html 主体布局结构对应的CSS 样式代码01 02 03 04 05 06 07 08 09 #header width: 990px;margin: 0 auto;.topmenu background:url(./images/top_bar.png)no-repeat
7、;CSS代码行号10 1112131415161718height: 24px;#page_wrapper width: 990px;margin: 5px auto;#page_wrapper .pages_nav CSS代码行号【任务7-1-1】规划与设计商品详情页面的布局结构表7-2商品详情页面0701.html 主体布局结构对应的CSS 样式代码1920212223242526272829303132margin-bottom: 10px;margin-left:20px;#product_focus width: 990px;margin-bottom: 10px;padding-b
8、ottom: 2px;border-bottom: 2px solid #D50050;#product_focus .product_title border-top: 1px solid #CCC;border-bottom: 2px solid #D50050;CSS代码行号3334353637383940414243444546height: 38px;line-height: 38px;text-align: center;font-size: 18px;text-shadow: 1px 1px 1px #CCC;font-weight: bold;margin-bottom: 10
9、px;#product_focus .l_column .slider width: 310px;float: left;#product_focus .l_column .info width: 430px;CSS代码行号【任务7-1-1】规划与设计商品详情页面的布局结构表7-2商品详情页面0701.html 主体布局结构对应的CSS 样式代码4748495051525354555657585960float: right;#product_focus .r_column float: right;width: 230px;position: relative;#product_main w
10、idth: 990px;margin-bottom: 10px;CSS代码行号6162636465666768697071727374#product_main .l_column float: left;width: 750px;.l_column .product_contentbox margin-bottom: 10px;#product_main .r_column float: right;width: 230px;CSS代码行号【任务7-1-1】规划与设计商品详情页面的布局结构表7-2商品详情页面0701.html 主体布局结构对应的CSS 样式代码757677787980#pr
11、oduct_main .r_column .sidebar margin-bottom: 12px;border: 1px solid #eeca9f;#footer CSS代码行号81828384858687width: 990px;margin: 0 auto;height: 50px;padding: 5px 0;background: #f0f0f0;margin-bottom:5px;CSS代码行号【任务7-1-1】规划与设计商品详情页面的布局结构商品详情页面0701.html 布局结构各局部结构对应的CSS 样式代码如表7-3 所示。4创建样式文件与编写CSS样式代码表7-3商品详
12、情页面0701.html 布局结构各局部结构对应的CSS 样式代码0102030405060708091011.tx float: left;width: 430px;padding-left: 50px;line-height: 24px;.menur float: left;width: 500px;line-height: 22px;CSS代码行号1213141516171819202122position: relative;z-index: 666;#product_focus .l_column .slider .btn text-align: center;margin-top:
13、 15px;cursor: pointer;.l_column .info .support_payment_box CSS代码行号【任务7-1-1】规划与设计商品详情页面的布局结构4创建样式文件与编写CSS样式代码表7-3商品详情页面0701.html 布局结构各局部结构对应的CSS 样式代码2324252627282930313233343536font-size: 14px;overflow: hidden;*zoom: 1;border: 1px solid #F6A100;background: #FFFEE6;padding: 11px 10px;_padding: 10px;ma
14、rgin-bottom: 10px;.l_column .info .promise border-top: 1px dotted #CCC;border-bottom: 1px dotted #CCC;height: 34px;CSS代码行号3738394041424344454647484950margin-top: 8px;line-height: 34px;text-align: center;.r_column .sort_info .content padding: 5px 8px;color: #333#product_focus .r_column .sort_info bor
15、der: 1px solid #ccc;background: url(./images/maidian_bg.jpg)repeat-x left bottom;height: 332px;CSS代码行号【任务7-1-1】规划与设计商品详情页面的布局结构4创建样式文件与编写CSS样式代码表7-3商品详情页面0701.html 布局结构各局部结构对应的CSS 样式代码5152535455565758596061626364margin-bottom: 5px;.l_column .product_contentbox h2 background: url(./images/ig-li.gif)#
16、f5f5f5 no-repeatscroll 1% 50%;border: 1px solid #CCC;border-bottom: 0;height: 31px;font-weight: bold;line-height: 31px;padding-left: 25px;color: #C00;CSS代码行号6566676869707172737475767778font-size: 14px;.l_column .product_contentbox .content border: 1px solid #CCC;padding: 8px;border-top: 0px;line-hei
17、ght: 1.5;overflow: hidden;*zoom: 1;.flexslider margin: auto;CSS代码行号【任务7-1-1】规划与设计商品详情页面的布局结构4创建样式文件与编写CSS样式代码表7-3商品详情页面0701.html 布局结构各局部结构对应的CSS 样式代码7980818283border: 1px solid #CCC;background: #fff;position: relative;z-index: 1;CSS代码行号8485868788.r_column .sidebar .content padding: 8px 5px;height: 1
18、%;CSS代码行号 在文件夹“CSS”中可创建通用样式文件base.css，在该样式文件中定义CSS 代码，样式文件base.css 的CSS 代码如表5-3 所示。 【任务7-1-2】在网页顶部显示当前日期和问候语任 务 描 述在网页文档0701.html 中编写JavaScript 代码实现以下功能。在网页文档0701.html 的顶部显示当前日期及星期数，日期格式为：年- 月- 日- 星期。在网页文档0701.html 顶部当前日期及星期数的右侧根据不同时间段（采用24 小时制）显示相应的问候语。网页顶部显示当前日期和问候语的浏览效果如图7-3 所示。图7-3网页顶部显示当前日期和问候语
19、的浏览效果【任务7-1-2】在网页顶部显示当前日期和问候语1编写JavaScript代码在网页中显示当前日期打开网页文档0701.html，在网页头部输入表7-4 所示的JavaScript 代码。任 务 实 施表7-4显示当前日期的JavaScript 代码之一JavaScript代码行号10111213141516171819202122【任务7-1-2】在网页顶部显示当前日期和问候语 在网页0701.html 主体部分的合适位置输入如下所示的HTML 代码调用自定义函数dateweek()，显示当前日期。dateweek() 表7-4 中JavaScript 代码的功能是在网页中显示当前
20、日期（包括年、月、日和星期数）， 该代码中应用了以下的JavaScript 知识。 JavaScript 代码嵌入到HTML 代码中的标记符 与。对于某些浏览器不支持JavaScript 代码的注释符。 JavaScript 区分字母的大小写，具有大小写敏感的特点。 JavaScript 的变量声明语句、赋值语句和输出语句。 JavaScript 中变量的定义与赋值，数组对象的定义、数组元素的赋值和数组元素的访问。 JavaScript 的对象：Date、Array、document。 Date 对象的方法：getFullYear、getMonth、getDate 和getDay。 docum
21、ent 对象的方法：write。 JavaScript 的表达式：“ 今天是：+thisYear+ 年+thisMonth+ 月+thisDate+ 日 +thisWeek”【任务7-1-2】在网页顶部显示当前日期和问候语表7-4 中JavaScript 代码的具体含义解释如下。 JavaScript 脚本程序必须置于 与 标记符中。第02 行的标记“”针对于不支持脚本的浏览器忽略其间的脚本程序。第03 行至第20 行定义了函数dateweek()，第04 行至第19 行为函数主体，共有15 条语句，每一条语句都以“;”结束。 JavaScript 区分字母的大小写。第04 行为声明变量的语句
22、：声明4 个变量，变量名分别为currentDate、thisDate、thisMonth 和thisYear。第05 行创建一个日期对象实例，其内容为当前日期和时间，且将日期对象实例赋给变量currentDate。【任务7-1-2】在网页顶部显示当前日期和问候语表7-4 中JavaScript 代码的具体含义解释如下。第06 行使用日期对象的getDate 方法获取日期对象的当前日期数（即1-31），且赋给变量thisDate。第07 行使用日期对象的getMonth 方法获取日期对象的当前月份数，且赋给变量thisMonth。注意由于月份的返回值是从0 开始的索引序号，即1 月返回0，其他
23、月份依次类推，为了正确表述月份，需要做加1 处理，让1 月显示为“1 月”而不是“0 月”。第08 行使用日期对象的getFullYear 方法获取日期对象的当前年份数，且赋给变量thisYear。如果年份在2000 年以前，则返回值是与1900 年的年份差值（即用两位数表示年份）；年份在2000 年及以后，直接返回完整年份（即用四位数表示年份）。第09 行使用关键字new 和构造函数Array() 创建一个数组对象weekArray，并且创建数组对象时指定了数组的长度为7，即该数组元素的个数为7，数组元素的下标（序列号）从0 开始，各个数组元素的下标为0 6。此时数组对象的每一个元素都尚未指
24、定类型。【任务7-1-2】在网页顶部显示当前日期和问候语表7-4 中JavaScript 代码的具体含义解释如下。11、第10 行至第16 行分别给数组对象weekArray 的各个元素赋值。12、第17 行使用日期对象的getDay 方法获取日期对象的当前星期数，其返回值为0 6，序号0 对应星期日，序号1 对应星期一，依次类推，序号6 对应星期六。且使用“ ”运算符访问数组元素，即获取当前星期数的中文表示。13、第18 行和19 行使用文档对象document 的write 方法向网页中输出当前日期，表达式“今天是：+thisYear+ 年+thisMonth+ 月+thisDate+ 日
25、 + +thisWeek” 使用运算符“+”连接字符串，其中thisYear、thisMonth、thisDate 和thisWeek 是变量， 年、 月、 日 是字符串。【任务7-1-2】在网页顶部显示当前日期和问候语 在网页的【代码】视图中，将光标置于显示当前日期的JavaScript 代码之后，然后输入表7-5 所示的JavaScript 代码。2编写JavaScript代码在网页中显示问候语表7-5在不同时间段显示不同问候语的JavaScript 代码JavaScript代码行号!-var today , hour ;today = new Date() ;hour = today.g
26、etHours() ;if (hour 8) document.write( 早晨好!) ; else if (hour 12) document.write( 上午好!) ; else if (hour 14) document.write( 中; 午好!) ; else if (hour 01 02 03 04 05 06 07 08 09 10 11 12 【任务7-1-2】在网页顶部显示当前日期和问候语表7-5 中JavaScript 代码应用了以下的JavaScript 知识。 JavaScript 的变量声明语句、赋值语句和if.else if 语句
27、。关系运算符和关系表达式。 JavaScript 的对象：Date、document。 Date 对象的方法：getHours。 document 对象的方法：write。表7-5 中JavaScript 代码的具体含义解释如下。第03 行声明了两个变量，变量名分别为today、hour。第04 行是一条赋值语句，创建一个日期对象，且赋给变量today。第05 行是一条赋值语句，调用日期对象的方法getHours() 获取当前日期对象的小时数，且赋给变量hour。【任务7-1-2】在网页顶部显示当前日期和问候语表7-5 中JavaScript 代码的具体含义解释如下。第06 行至10 行是一个
28、较为复杂的if.else if 语句，该语句的执行规则如下。 首先判断条件表达式hour 8 是否成立，如果该条件表达式的值为true（例如早晨7 点），则程序将执行对应语句“document.write( 早晨好!) ;”，即在网页中显示“早晨好!”的问候语。 如果条件表达式hour 8 的值为false（例如上午9 点），那么判断第1 个else if 后面的条件表达式hour 12 是否成立，如果该条件表达式的值为true（例如上午9 点），则程序将执行对应语句“document.write( 上午好!) ;”，即在网页中显示“上午好!”的问候语。 以此类推，直到
29、完成最后一个else if 条件表达式hour 17 的测试，如果所有的if 和else if的条件表达式都不成立（例如晚上20 点），则执行else 后面的语“document.write( 晚上好!) ;”，即在网页中显示“晚上好!”的问候语。【任务7-1-2】在网页顶部显示当前日期和问候语 表7-6 也是显示当前日期的JavaScript 代码，试分析这些代码的作用与含义，应用了哪些JavaScript 知识。3分析具有类似功能的JavaScript代码的作用与含义表7-6显示当前日期的JavaScript 代码之二JavaScript代码行号01 02 03 04 05 0
30、6 07 08 09 10 11 121314 【任务7-1-2】在网页顶部显示当前日期和问候语 表7-7 中JavaScript 代码的功能是在不同的节假日显示不同的问候语，试分析这些代码的作用与含义，应用了哪些JavaScript 知识。表7-7在不同节假日显示不同问候语的JavaScript 代码JavaScript代码行号01 02 03 04 05 06 07 08 09 10 11 【任务7-1-3】网页中动态改变局部区域文本字体大小任 务 描 述 动态改变网页中文本字体大小，可以满足不同浏览者的需求。在网页文档0701.html 中的合适位置编写JavaScript 代码，实现动
31、态改变网页中文本字体大小的功能。 网页中动态改变局部区域文本字体大小的浏览效果如图7-4 所示，单击“大”“中”或“小”选项可以动态改变该区域的字体大小，单击“在线打印”选项会弹出【打印】对话框，单击“关闭”选项可以关闭该页面。图7-3网页顶部显示当前日期和问候语的浏览效果【任务7-1-3】网页中动态改变局部区域文本字体大小1编写改变文本字体大小的代码在网页的【代码】视图中，将光标置于“”之前，然后输入表7-8 所示的JavaScript 代码。任 务 实 施表7-8动态改变网页中文本字体大小的JavaScript 代码JavaScript代码行号01 02 03 04 05 06 07 【任
32、务7-1-3】网页中动态改变局部区域文本字体大小 切换到【设计】视图，在“功能操作”所在的区块，选中文字“大”，然后在【属性】面板的“链接”列表框中输入代码“JavaScript:setFontSize(16)”，调用改变字体大小的函数如图7-5 所示。调用函数时传递的参数为“16”，即文本的字体大小为“16 像素”。2设置超级链接，调用改变字体大小的函数图7-5设置超级链接，调用改变字体大小的函数【任务7-1-3】网页中动态改变局部区域文本字体大小 以同样的方法选中文本“中”，在【属性】面板的“链接”列表框中输入代码“javascript:setFontSize(14.9)”； 选中文本“小
33、”，在“链接”列表框中输入代码“javascript:setFontSize(12)”。 参照设置字体大小的方法设置“在线打印”和“关闭网页”，选中文本“在线打印”，在【属性】面板的“链接”列表框中输入代码“javascript:window.print()”；选中文本“关闭”，在“链接”列表框中输入代码“javascript:window.close()”。其中print() 和close() 为Window对象的方法。2设置超级链接，调用改变字体大小的函数【任务7-1-4】在网页中自动滚动图片任 务 描 述 在网页文档0701.html 中的合适位置编写JavaScript 代码，实现横向
34、定时自动滚动图片和单击按钮滚动图片效果。横向滚动图片的浏览效果如图7-6 所示。图7-3网页顶部显示当前日期和问候语的浏览效果【任务7-1-4】在网页中自动滚动图片1编写代码引入外部JavaScript库文件在网页文档0701.html 中的头部添加以下代码， 引入外部JavaScript 库文件jquery.scrollLoading-min.js 和jquery.flexslider-min.js，这两个JS 文件包含了实现图片滚动的通用代码。任 务 实 施2编写JavaScript代码实现横向滚动图片效果 打开网页文档0701.html，切换到【代码】视图，在 与 之间分别输入HTML
35、代码，实现展示推荐商品的功能，代码如表7-9 所示。【任务7-1-4】在网页中自动滚动图片表7-9实现展示推荐商品功能的HTML 代码01 02 03 04 05 06 07 08 09 10 11 12 13 14 推荐商品 ￥4198.00Apple iPhone 5s (16GB)(金)HTML代码行号【任务7-1-4】在网页中自动滚动图片表7-9实现展示推荐商品功能的HTML 代码1516171819202122232425262728 HTML代码行号【任务7-1-4】在网页中自动滚动图片表7-9实现展示推荐商品功能的HTML 代码293031323334353637383940 H
36、TML代码行号【任务7-1-4】在网页中自动滚动图片在0701.html 的头部编写JavaScript 代码，实现横向滚动图片功能，其代码如表7-10 所示。表7-10实现横向滚动图片的JavaScript 代码JavaScript代码行号$(function()$(.flexslider).flexslider(animation: slide,easing:easeOutQuad,controlNav: false,directionNav: true,animationLoop: true,slideshow: true,01 02 03 04 05 06 07 08 09 JavaS
37、cript代码行号pauseOnHover: true,slideshowSpeed: 10000,animationSpeed: 800,before: function(slider)$(img.scrollLoadingImg,slider).scrollLoading();););10 11 12 13 1415161718 【任务7-1-5】在网页中实现选项卡功能任 务 描 述在网页文档0701.html 中编写HTML 代码和JavaScript 代码实现选项卡结构及其切换功能，其浏览效果如图7-7 所示。图7-7网页选项卡功能的浏览效果【任务7-1-5】在网页中实现选项卡功能1编
38、写HTML代码实现选项卡结构 打开网页文档0701.html，切换到【代码】视图，在“ 与”之间分别输入HTML 代码，实现选项卡结构，代码如表7-11 所示。任 务 实 施01 02 03 04 05 06 07 08 09 商品详细信息 商品介绍 参数规格 包装清单HTML代码行号表7-11实现选项卡结构的HTML 代码101112131415161718 售后服务 HTML代码行号【任务7-1-5】在网页中实现选项卡功能1920212223242526272829303132 HTML代码行号表7-11实现选项卡结构的HTML 代码【任务7-1-5】在网页中实现选项卡功能 在子文件夹“j
39、s”中创建JavaScript 文件tabchange.js，然后打开该文件，输入表7-12 所示的JavaScript 代码。2编写JavaScript代码实现选项卡切换功能表7-12实现选项卡切换功能的JavaScript 代码JavaScript代码行号$(document).ready(function()SwitchBoxDetail(1););function SwitchBoxDetail(num)$(#tagcontent+num+.tab_content:not(:first).hide();$(#tagtitle+num+ li).each(function(i)01 02
40、 03 04 05 06 07 08 09 【任务7-1-5】在网页中实现选项卡功能2编写JavaScript代码实现选项卡切换功能表7-12实现选项卡切换功能的JavaScript 代码JavaScript代码行号$(this).mousedown(function()$(#tagtitle+num+ li.nowtag).removeClass(nowtag);$(this).addClass(nowtag);$(#tagcontent+num+ .tab_content:visible).hide();$ (#tagcontent+num+ .tab_content:eq( + i +
41、).fadeIn(400);););101112131415161718【任务7-1-5】在网页中实现选项卡功能实现选项卡切换功能的JavaScript 代码中相关的CSS 代码如表7-13 所示。表7-13实现选项卡切换功能的JavaScript 代码中相关的CSS 代码01 02 03 04 05 06 07 08 09 10 11 12 #product_main .l_column .product_contentbox .menu_tag background: transparent url(./images/bg_line_menu.gif) repeat-x scroll le
42、ft bottom;clear: both;height: 24px;margin: 0 0 5px;padding: 2px 0;text-align: left;cursor: pointer;#product_main .l_column .product_contentbox .menu_tag ul float: left;CSS代码行号【任务7-1-5】在网页中实现选项卡功能表7-13实现选项卡切换功能的JavaScript 代码中相关的CSS 代码1314151617181920212223242526#product_main .l_column .product_conten
43、tbox .menu_tag ul li float: left;cursor: pointer;#product_main .l_column .product_contentbox .menu_tag ul li a background-color: #C00000;border: 1px solid #C00000;border-bottom-color: #C00000;float: left;height: 20px;margin: 0 0 0 5px;CSS代码行号【任务7-1-5】在网页中实现选项卡功能表7-13实现选项卡切换功能的JavaScript 代码中相关的CSS 代码
44、2728293031323334353637383940padding: 4px 10px 0;text-decoration: none !important;color: #FFF;#product_main .l_column .product_contentbox .menu_tag ul li.nowtag a border: 1px solid #C00000;border-bottom-color: #FFF;background-color: #FFF;color: #C00000;font-weight: bold;#product_main .l_column .produ
45、ct_contentbox .tab_content CSS代码行号【任务7-1-5】在网页中实现选项卡功能表7-13实现选项卡切换功能的JavaScript 代码中相关的CSS 代码4142434445464748495051clear: both;padding: 5px 8px;line-height: 1.6;overflow: hidden;#product_main .l_column .product_contentbox .tab_content p line-height: 1.7;padding-bottom: 6px;text-indent: 2em;CSS代码行号【任务
46、7-1-5】在网页中实现选项卡功能在网页文档0701.html 中头部添加以下代码，引入外部JavaScript 库文件tabchange.js。3编写代码引入外部JavaScript库文件【任务7-1-6】在网页中实现商品图片轮换展示与放大功能任 务 描 述 在网页文档0701.html 中编写HTML 代码和JavaScript 代码，实现商品图片轮换展示与放大功能，其浏览效果如图7-8 所示。图7-8商品图片轮换展示与放大的浏览效果【任务7-1-6】在网页中实现商品图片轮换展示与放大功能1编写HTML代码实现商品图片轮换展示结构 打开网页文档0701.html，切换到【代码】视图，在“”
47、与 之间分别输入HTML 代码，实现商品图片轮换展示结构，代码如表7-14 所示。任 务 实 施01 02 03 04 05 06 07 08 HTML代码行号表7-14实现商品图片轮换展示结构的HTML 代码【任务7-1-6】在网页中实现商品图片轮换展示与放大功能091011121314151617181920212223HTML代码行号表7-14实现商品图片轮换展示结构的HTML 代码【任务7-1-6】在网页中实现商品图片轮换展示与放大功能 在子文件夹“js”中创建JavaScript 文件jqzoom.js，然后打开该文件，输入表7-15 所示的JavaScript 代码，实现商品图片放
48、大的通用功能。2编写JavaScript代码实现商品图片放大的通用功能24252627282930HTML代码行号表7-14实现商品图片轮换展示结构的HTML 代码【任务7-1-6】在网页中实现商品图片轮换展示与放大功能表7-15实现商品图片放大通用功能的JavaScript 代码JavaScript代码行号function($) $.fn.jqueryzoom = function(options) var settings = xzoom: 200,yzoom: 200,offset: 10,position: right,lens: 1,preload: 1;if (options) $
49、.extend(settings, options)var noalt = ;01 02 03 04 05 06 07 08 09 10 11 12 13 14 【任务7-1-6】在网页中实现商品图片轮换展示与放大功能表7-15实现商品图片放大通用功能的JavaScript 代码JavaScript代码行号$(this).hover(function() var imageLeft = $(this).offset().left;var imageTop = $(this).offset().top;var imageWidth = $(this).children(img).get(0).o
50、ffsetWidth;var imageHeight = $(this).children(img).get(0).offsetHeight;noalt = $(this).children(img).attr(alt);var bigimage = $(this).children(img).attr(jqimg);$(this).children(img).attr(alt, );if ($(div.zoomdiv).get().length = 0) $(this).after();$(this).append( )if (settings.position = right)
