-1

我有这个简单的图像缩放 jQuery。这里有一个演示示例。它使用 elevateZoom jQuery。

后面的代码很简单：

<img id="zoom_05" src='small_image1.png' data-zoom-image="large_image1.jpg"/>
<script>
   $vc("#zoom_05").elevateZoom({
  zoomType              : "inner",
  cursor: "crosshair"
});
</script>

我的问题是，只有当鼠标悬停在它上面时，我才能按需加载大图像。请看一下这个演示示例，让我知道我需要在代码中添加什么。

4

2 回答 2

2

上面的 img 元素 (id="zoom_05") 不会自行加载 large_image1.jpg。因为 elevateZoom() 会查看它的数据缩放图像值并立即加载它，所以会发生大图像加载。解决此问题的一种方法是推迟 elevateZoom() 直到用户第一次将鼠标悬停在小图像上。快速示例：

   jQuery( function () {

   var elevate_zoom_attached = false, $zoom_05 = $("#zoom_05") ;

    $zoom_05.hover(
     // hover IN
     function () {
        if ( ! elevate_zoom_attached ) {
        $zoom_05.elevateZoom({
                  zoomType : "inner",
                  cursor   : "crosshair"
                });
        elevate_zoom_attached = true ;
        };
    },
     // hover OUT
     function () {
        if ( elevate_zoom_attached) { // no need for hover any more
          $zoom_05.off("hover");
        }
     }
  );

}) ;

请注意，这是一个快速的、令人印象深刻的代码，但应该可以工作……在这种情况下，elevateZoom() 操作可能不会在大图像加载过程中立即发生。

于 2013-06-26T15:25:37.413 回答
0

我使用这个想法通过向图像添加缩放类来启动同一页面上任意数量的图像的缩放。它可以在没有任何 HOVER OUT 的情况下工作

<img class="zoom" src="myimage.png" data-zoom-image="mybigimage.png"/>

$('.zoom').hover(
  // hover IN
  function () {

   var currImg = $(this); //get the current image
   if (!currImg.hasClass('zoomon')) { //if it hasn't been initialized
       currImg.elevateZoom(); //initialize elevateZoom
       currImg.addClass('zoomon'); //add the zoomon class to the img so it doesn't re-initialize
   }
})
于 2014-05-06T14:35:03.143 回答