JavaScript展示商品详情图
2017-05-11 15:34
267 查看
这次的效果是鼠标经过商品缩略图的时候,显示对应的商品大图。实现这个效果看起来并不难,但是有一个问题却是另我们头痛的,在在循环里面为小图标写onmouseover事件的时候,获取不到对应的索引。这也是今天之前,我一直解决不了的问题。这就牵扯到了在JavaScript中,变量与属性的问题。下面开始写这个小功能,并解释变量与属性的区别。
先看一下原始的布局 ,我们所要做的效果无非就是鼠标经过下面的小图片时,上面显示与之对应的大图片。 我们的代码按照正常思维肯定是这样写。应该是先获取所有的小图标的对象,然后遍历,在循环里面,写每个小图片的over事件,在事件里把背景图换成对应的大图。但是这样是不对的,我们可以吧对应的索引打印一下,会发现不论是鼠标放到哪一个上面,打印的永远是最后一个的索引。索引拿不到,大图片自然没有办法显示。这是因为i只是一个变量,当鼠标放到小图片的时候,这个循环已经结束了,所以i的值,就是最后一个值。也就出现了问题。 为了解决这个问题,我们用索引的时候 ,就不能直接用i这个变量了,而是为lis这个数组添加一个属性,我们添加为index属性,当然名字可以自定义。就是在循环之初,把i的值给lis[i]的index属性。然后获取索引的时候,直接用lis[i].index属性。这样就解决了获取不到索引的问题。这时候,鼠标放到对应的小图标的时候,就可以展示对应的大图标了。
先看一下原始的布局 ,我们所要做的效果无非就是鼠标经过下面的小图片时,上面显示与之对应的大图片。 我们的代码按照正常思维肯定是这样写。应该是先获取所有的小图标的对象,然后遍历,在循环里面,写每个小图片的over事件,在事件里把背景图换成对应的大图。但是这样是不对的,我们可以吧对应的索引打印一下,会发现不论是鼠标放到哪一个上面,打印的永远是最后一个的索引。索引拿不到,大图片自然没有办法显示。这是因为i只是一个变量,当鼠标放到小图片的时候,这个循环已经结束了,所以i的值,就是最后一个值。也就出现了问题。 为了解决这个问题,我们用索引的时候 ,就不能直接用i这个变量了,而是为lis这个数组添加一个属性,我们添加为index属性,当然名字可以自定义。就是在循环之初,把i的值给lis[i]的index属性。然后获取索引的时候,直接用lis[i].index属性。这样就解决了获取不到索引的问题。这时候,鼠标放到对应的小图标的时候,就可以展示对应的大图标了。
鼠标放到最后一个小图标上面,效果也就出来了。
相关文章推荐
- yuncart商品详情页数据格式 - Javascript操作规格是否可选
- 学习淘淘商城第六十四课(实现商品详情页面展示)
- 原生javascript防淘宝商品详情实现放大镜效果
- 淘淘商城系列——实现商品详情页面展示
- 商品详情的图片选项展示
- 简单商品搜索界面的实现,流失布局,历史记录,商品展示,商品详情
- 框架 day81 涛涛商城项目-实现首页搜索功能,商品详情,描述,规格展示
- 商品详情的图片选项展示
- JavaScript 【某宝某东 360 度 3D 旋转展示商品主图实现】
- android:仿淘宝商品详情下拉展示浏览历史
- 淘淘商城系列——搭建商品详情页面展示工程
- andriod——Retrofit+Fresco+MVP+RxJAVA列表展示商品点击跳转此详情页面
- 淘淘商城系列——商品详情页面展示添加缓存
- 商品详情页面展示
- andriod———1.实现原生登录注册。 2.首页完成商品列表展示点击相对应的商品ID进入商品详情 3.商品详情页面展示数据,点击加入购物车进入购物车页面 4.购物车页面完成购物车编辑,删除,功能
- 商品详情页面展示
- JavaScript中的execCommand()命令详解及实例展示
- 【JavaScript 插件】图片展示插件 PhotoSwipe 初识
- 仿淘宝上拉查看商品详情控件的源代码解读与应用
- 【转】商品详情页系统的Servlet3异步化实践