用cloud-zoom做一个仿淘宝的宝贝放大镜查看功能

　　插件我就不多介绍了，在我整理的《常用JQuery插件整理》里介绍，也有示例。但在实际运用中，我发现一个插件无法达到的效果，语言比较难描述，看图说话吧

　　发现什么问题没有，我做了个demo，虽然已经达到放大镜的效果了，但是大图的显示位置不是我想要的效果，我想要的效果就是，大图的位置和左边图的外框平行，并且始终保持在那个位置。可能有人会说，插件不是提供了xy轴偏移的设置么。是，但是如果图片切换了，尺寸和原先的不一样，xy轴的偏移量要怎么重新设置？最终可能就会出现这样的效果

　　所以，为了实现我的需求，我就要对插件进行修改，好在插件提供了未压缩的代码，而且中文注释完整，所以我大致看了下源码，就修改出我需要的效果了，下面我细细说来：

　　首先，通过观察，发现插件大图显示的位置是和小图平行的，就是小图显示在什么位置，大图就是与其平行，出现在它的右侧，所以第一步就是固定小图宽度，当然我们不能直接把小图宽高定死，这样会拉伸图片造成失真，所以只能从插件里动手脚。

　　至于宽度要定多少，我打算是和小图外边那个框同宽，并且再长一点，达到这样的效果

　　打开插件，找到这句代码：

var siw = outerWidth();//图片的输出宽度

　　我们把它改为我们需要的值，因为我的外框是383px，再加上一点空隙，算10px，也就是393px，这样代码就修改成了：

var siw = 393;//图片的输出宽度

　　这么一来，我们已经解决了大图x轴固定的效果了，那么如何让y轴也固定呢，那我们就需要调整y轴。因为我们图片默认是在右侧显示，所以就找到了这段代码：

case 'right':xPos += siw; // + opts.adjustX;
break;

　　我们发现，在默认情况下，插件是不设置y轴的偏移的，也就是默认和小图持平。所以，我在这里做了点修改：

case 'right':xPos += siw; // + opts.adjustX;yPos = -(383-sImg.outerHeight())/2;
break;

　　我想这个总不用我多解释了，就是实时计算出大图需要偏移的数值，外框高度减去图片高度除以2，就是大图需要向上的偏移量。

　　修改完以上2个地方，已经能达到我要的效果了，当然为了小图在外框中始终处于居中的位置，我也是通过插件来控制的，先看下底下三张小图切换的代码：

<a href='304327508.jpg' class='cloud-zoom-gallery' rel="useZoom:'zoom',smallImage:'s_304327508.jpg',marginTop:84,marginLeft:0"> <img src="s_304327508.jpg" width="50" />
</a><a href='1234567890.jpg' class='cloud-zoom-gallery' rel="useZoom:'zoom',smallImage:'s_1234567890.jpg',marginTop:0,marginLeft:22"> <img src="s_1234567890.jpg" height="50" />
</a><a href='123.jpg' class='cloud-zoom-gallery' rel="useZoom:'zoom',smallImage:'s_123.jpg',marginLeft:148,marginTop:137"> <img src="s_123.jpg" height="50" />
</a>

　　看下rel参数里，我增加了marginLeft和marginTop，这两个数值的目的就是让小图在外框内居中，当然插件里我们也要对其进行点修改，增加了一句：

$(this).bind('click', $(this), function (event) {......$('#' + data.useZoom).css({'marginTop':event.data.data('relOpts').marginTop,'marginLeft':event.data.data('relOpts').marginLeft});......
});

　　至此，插件已经全部修改完，注意点有二：一、小图的尺寸不能超过外框，也就是在处理图片的时候必须按比例缩放。因为我们公司自己制作的图片上传插件有这功能，所以我只需设置下缩略图的宽高就行；二、marginLeft和marginTop必须手动计算，这个虽然不难，就是麻烦点，计算方式和计算y轴偏移量同理。

　　最后给个demo下载地址吧：点击下载

转载于:https://www.cnblogs.com/hooray/archive/2011/11/28/2265714.html

用cloud-zoom做一个仿淘宝的宝贝放大镜查看功能相关推荐

【每日一练】原生js仿淘宝主图放大镜功能，附学习源码
在我们的项目中,经常会遇到各种功能效果的实现,对于每一项功能的实现方式,都有很多种,这些实现方式没有好坏之分,只有适合与否,但是我个人建议,如果项目急就选择自己擅长的方式实现,比较完成工作更加重要嘛. ...
js仿淘宝主图放大镜功能
js仿淘宝主图放大镜功能演示地址下载地址
淘气网（一个仿淘宝的购物网站）
主页: 登录界面: 商品详情: 商家主页: JQ+Bootstrap+纯手打 github : https://github.com/yotcap/taoqiNet-imitationTaobao
使用react 写一个仿淘宝图片放大镜效果
效果图人狠话不多,先上效果图,看看是不是各位想要的再往下看使用方法 import React, { Component } from "react"; import Image ...
Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能
需要做一个仿淘宝客户端ViewPager滑动到最后一页,再拖动的时候跳到详情的功能,刚开始我也迷糊了,通过查阅相关资料发现有好多种实现方法,下面小编给大家分享实例代码,感兴趣的朋友一起看看吧需要做一 ...
PHP仿淘宝网站程序设计
PHP仿淘宝网站程序设计在学习了PHP相关知识后利用其完成了一个仿淘宝网站界面,以下是相应的屏幕截图 (详细代码请联系我QQ:2186527424) 首先,进入登陆界面,在没有账户的情况下,点击右下 ...
Android仿淘宝、京东Banner滑动查看图文详情
文章目录写在前面效果图原理分析核心代码源码地址写在前面本文基于 ViewPager2 实现的 Banner 效果,进而实现了仿淘宝.京东Banner滑动至最后一页时继续滑动来查看图文详情 ...
java B2B2C 仿淘宝电子商城系统-Spring Cloud Eureka参数配置项详解
Eureka涉及到的参数配置项数量众多,它的很多功能都是通过参数配置来实现的,了解这些参数的含义有助于我们更好的应用Eureka的各种功能,下面对Eureka的配置项做具体介绍,供大家参考. 需要JA ...
java B2B2C Springcloud仿淘宝电子商城系统-spring cloud 框架原理
我们从整体来看一下Spring Cloud主要的组件,以及它的访问流程需要JAVA Spring Cloud大型企业分布式微服务云构建的B2B2C电子商务平台源码一零三八七七四六二六 1.外部或者 ...

用cloud-zoom做一个仿淘宝的宝贝放大镜查看功能

用cloud-zoom做一个仿淘宝的宝贝放大镜查看功能相关推荐

最新文章

热门文章