本文实例讲述了JavaScript实现京东购物放大镜和选项卡效果的方法。分享给大家供大家参考，具体如下：
购物网站点击商品后，都会有一个查看物品图片，并且可以放大仔细观察物品的功能。这个功能看起来复杂，其实实现起来非常简单。下面我们来一起做这个小效果吧！
首先，我们看一下页面的布局：
1.小图片显示区，上面有一个方形遮罩层 2.缩略图横向列表 3.大图显示区域
然后，我们写出开发步骤：
1.编写3个区域的html布局，使他们位于同一个容器内 2.显示区域2的图片列表 3.给区域2的图片添加mouSEOver事件，使图片显示在区域1内 4.鼠标移入区域1，生成半透明的选择框 5.区域3显示区域2选择框对应的图片位置放大的效果 6.鼠标移除区域2，区域3隐藏
最后，根据需求写出相应代码：
html和css：
rush:xhtml;">
Box">
Box">
Box">
js代码：
rush:js;">
大家可以做一下看看效果：
添加一个mask的div是因为，如果直接在smallBox上添加事件，会受到其中的子元素的影响，导致图片抖动。而对一个空内容的mask操作就不会有影响了。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
