Question

我有一个运行此插件的网站... http://classic.formstone.it/components/zoomer

该功能允许使用CSS变换放大和缩小图像，默认情况下有2个控件，放大和缩小。

我想添加一个重置控件，在缩放之前将图像恢复到默认状态。

我有以下......

$('.reset').on('click',function(){
  $('.zoomer-holder').css(
    'transform','translate3d(-50%, -50%, 0px) scale(0.2525, 0.2525)'
  );
});

以上内容适用于jsfiddle demo，但与zoomer插件并排使用时，它无法执行任何操作，就好像插件可以防止图像被更改一样。

任何人都可以了解可能发生的事情吗？

Js小提琴...... http://jsfiddle.net/fxuqqgLh/1/

Answer 1

该插件似乎使用动画循环，一遍又一遍地调用_render()函数来控制所保持图像的缩放和平移。不断调用渲染函数 - 显然是每秒多次：

function _render() {
    for (var i = 0, count = $instances.length; i < count; i++) {
        var data = $instances.eq(i).data("zoomer");

        if (typeof data === "object") {
            // Update image and position values
            data = _updateValues(data);
            data.lastAction = data.action;

            // Update DOM
            if (transformSupported) {
                var scaleX = data.imageWidth / data.naturalWidth,
                    scaleY = data.imageHeight / data.naturalHeight;

                data.$positioner.css(_prefix("transform", "translate3d(" + data.positionerLeft + "px, " + data.positionerTop + "px, 0)"));
                data.$holder.css(_prefix("transform", "translate3d(-50%, -50%, 0) scale(" + scaleX + "," + scaleY + ")"));
            } else {
                data.$positioner.css({
                    left: data.positionerLeft,
                    top: data.positionerTop
                });
                data.$holder.css({
                    left: data.imageLeft,
                    top: data.imageTop,
                    width: data.imageWidth,
                    height: data.imageHeight
                });
            }

            // Run callback function
            if (data.callback) {
                data.callback.apply(data.$zoomer, [
                    (data.imageWidth - data.minWidth) / (data.maxWidth - data.minWidth)
                ]);
            }
        }
    }
}

_render()函数使用data.imageWidth和data.imageHeight上定义的属性来设置每个动画周期的图像大小，这些属性本身由data.targetImageWidth和{data.targetImageHeight定义{1}}。插件会随着时间的推移将width / height属性移向targetWidth / targetHeight属性以创建动画。

在插件中，尝试在_render()：

的行中放置一个断点

var scaleX = data.imageWidth / data.naturalWidth,

然后使用您的javascript控制台播放imageWidth，imageHeight，targetImageWidth和targetImageHeight的不同值。您可以看到该插件的工作原理。

要创建“重置”按钮，您必须编写一些代码来操作缩放插件的data对象，而不是直接设置css。您应该下载并扩展插件的源代码 - 可以从controls下的options对象开始：

var options = {
    callback: $.noop,
    controls: {
        position: "bottom",
        zoomIn: null,
        zoomOut: null,
        next: null,
        previous: null
    },
    customClass: "",
    enertia: 0.2,
    increment: 0.01,
    marginMin: 30, // Min bounds
    marginMax: 100, // Max bounds
    retina: false,
    source: null
};

Answer 2

$( ".reset" ).click(function() {
  //Your Code
});

为什么不使用此代替：

$('.reset').on('click',function(){
  $('.zoomer-holder').css(
    'transform','translate3d(-50%, -50%, 0px) scale(0.2525, 0.2525)'
  );
});

点击删除/停止功能？

2 个答案: