Question

我在我的网站上使用以下缩放插件：http://www.elevateweb.co.uk/image-zoom

它使用mouseenter和mouseleave事件。我正试图通过点击来完成这项工作。单击可缩放和取消缩放（？），也可以在mouseleave上取消缩放。

点击初始化可以使用下面的代码，但我想在第二次点击或鼠标拖动时添加销毁或停止功能，或者甚至点击一个新的幻灯片。（它在旋转木马滑块内）有没有人有任何想法？

jQuery('span.zoom img').bind('click',function(){
    jQuery("span.zoom img").elevateZoom({
        zoomType: "inner",
        cursor: "crosshair",
        responsive: true,
        scrollZoom: true
    });
});

编辑：我已经废弃了上述情况并创建了自己的缩放。这场运动现在给我带来了麻烦。链接：http://bigideaadv.com/pic_site/?p=95

    jQuery("div.zoom2 img.rsImg2").mousemove(function(e) {
        var zoom = jQuery(this);
        var position = zoom.position();

        //console.log(position);

        jQuery(".rsImg2").css({"left" : position.left, "top" : position.top});

        // the first parameter (e) is automatically assigned an event object

        //TODO: Uncomment
        var parentOffset = jQuery(this).parent().offset();
        //or $(this).offset(); if you really just want the current element's offset
        var relX = e.pageX - parentOffset.left;
        var relY = e.pageY - parentOffset.top;

        jQuery(".rsImg2").css({"left" : relX, "top" : relY});
    });

Answer 1

如果您通过点击切换课程该怎么办？我没有测试过，但值得一试。你需要循环遍历每个图像：

jQuery(document).ready(function() {

jQuery('span.zoom img').each(function() {
    var self = jQuery(this);
    self.click(function() {
        self.toggleClass('doZoom');    
    });
});

jQuery('.doZoom').elevateZoom({
    zoomType: "inner",
    cursor: "crosshair",
    responsive: true,
    scrollZoom: true
});

});

jQuery - 点击时销毁并重新初始化插件

1 个答案: