携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情
在之前，我们介绍了网络商城首页制作使用jQuery 特效完成一个网上商城的首页 - 掘金 (juejin.cn)
那么对于商品展示，我们还想让他更美观一点点，那么这一次，我们来实现商品详情页
需求分析：
xx商城商品详情页所展示的内容主要有以下几个功能。
- 商品详情展示模块
- 放大镜模块（鼠标悬浮的时候，对应的部分图片放大）
- 产品信息选项卡模块（选不同图片，展示不同内容）
其中商品名称和商品描述两个属性是使用 ajax 请求本地 product.json 文件中的数据来获取的，放大镜功能是使用我们之前学习的放大镜插件 jqzoom 实现的。
结果展示：
事不宜迟，就让我们抓紧开始编写商品详情页吧。
首先，在目录下创建 detail.html。
第一步我们还是分板块书写。
上面板块大致是这样的。
商品详情字样：在外层div用标题实现。具体参考前面文章。
左下方产品介绍，图片使用ul，li，下面按钮也是，并且定义三个div将介绍文本写进去
前面三个空白小点后面是图片。
然后对于商品信息
前面文字可以在一个div，后面几个颜色使用ulli，尺寸也是，数量用下拉框，评分也是ulli
对于左侧大图，之间div里面img，这里就不说了。
那么如何变成结果那样的？如何通过首页点击来到详情页呢？ 关于来到详情页，我们使用ajax请求商品信息
使用css后变成了(这里图片我暂时没有加入)
如何使用放大器
/*使用jqzoom*/
$(function(){
$(".jqzoom").jqueryzoom({
xzoom: 300, //放大图的宽度(默认是 200)
yzoom: 300, //放大图的高度(默认是 200)
offset: 10, //离原图的距离(默认是 10) position: "right", //放大图的定位(默认是 "right")
preload:1
});
});
到这里，大致内容结束。
