-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

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 に答える