单击时删除/停止功能？答案

【问题标题】：Remove/Stop function on click?单击时删除/停止功能？
【发布时间】：2023-03-19 06:25:01
【问题描述】：

我有一个网站运行这个插件... 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 演示中运行良好，但是当与 zoomer 插件一起使用时，它无法执行任何操作，就好像插件阻止了图像被更改一样。

任何人都可以阐明可能发生的事情吗？

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

【问题讨论】：

您能否将zoomer 插件也添加到您的 jsfiddle 中并在此处发布 jsfiddle
这里是@dreamweiver jsfiddle.net/fxuqqgLh/1

标签： javascript jquery css

【解决方案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 定义。该插件会随着时间将 width/height 属性移向 targetWidth/targetHeight 属性以创建动画。

在插件中，尝试在_render() 中的行放置一个断点：

var scaleX = data.imageWidth / data.naturalWidth,

然后使用您的 javascript 控制台为 imageWidth、imageHeight、targetImageWidth 和 targetImageHeight 设置不同的值。你可以看到插件是如何工作的。

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

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
};

【讨论】：

感谢@Oliver 的详细回复，我想我可能必须找到一个替代插件——对于这么简单的事情似乎有点头疼！
@Liam 是的，我会担心这个插件的效率问题，因为它永远不会停止自己制作动画。
是否可以停止该函数运行@Oliver，然后稍后重新初始化它？
@Liam 可能，但您必须对插件进行大量修改才能做到这一点。

【解决方案2】：

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

你为什么不用这个来代替：

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

【讨论】：