1

我正在使用 JQuery 在我的网站上缩放图像。我还创建了一些图标，如果我点击它，它们会改变图像以缩放。不幸的是，图像更改后，缩放后的图像不再可移动。我只能在缩放窗口中看到图像的顶部。但是当我向下移动鼠标时，什么也没有发生。有谁知道，我做错了什么？

这是我通过单击其中一个图标调用的 java 脚本函数的源代码：

function changePicture(imgSrc)
{    
document.getElementById("main-image-js").setAttribute("src", imgSrc);
document.getElementById("main-image-zoom").setAttribute("href", imgSrc);
$(".zoomWrapperImage").children('img').eq(0).attr("src", imgSrc);   
}

要缩放的图像是这样实现的：

<a class="main-image" href="Picture1.jpg" id="main-image-zoom" title="Zoom">
<img id="main-image-js" src="Picture1.jpg" width="380" style="display: inline; cursor: pointer;"></a>

谢谢和最好的问候。

4

1 回答 1

4

您应该在更改图像源之前清除 jQZoom 中的数据：

function changePicture(imgSrc)
{ 
    cleanJqzoom();

    $("#main-image-zoom").attr('href', imgSrc);
    $("#main-image-js").attr('src', imgSrc);

    initJqzoom();
}

function initJqzoom() { 
    $('.main-image').jqzoom(); 
}   

function cleanJqzoom() {
    // clean the data from jQZoom
    $('.main-image').removeData('jqzoom');
}
于 2013-07-05T21:01:57.673 回答