如何在Qualtrics中使用放大鏡？

Question

我想在Qualtrics Survey中用圖像實現放大鏡邏輯。我嘗試了一些代碼，但這是我第一次嘗試此功能。

Answer 1

在JavaScript中用'jQuery'替換所有出現的'$'。

問題HTML：

<div class="magnify"> 
<div class="large"></div> 
<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/> 
</div> 

問題的JavaScript：

Qualtrics.SurveyEngine.addOnload(function() 
{ 
jQuery(document).ready(function(){ 

    var native_width = 0; 
    var native_height = 0; 
    jQuery(".large").css("background","url('" + jQuery(".small").attr("src") + "') no-repeat"); 

    //Now the mousemove function 
    jQuery(".magnify").mousemove(function(e){ 
     //When the user hovers on the image, the script will first calculate 
     //the native dimensions if they don't exist. Only after the native dimensions 
     //are available, the script will show the zoomed version. 
     if(!native_width && !native_height) 
     { 
      //This will create a new image object with the same image as that in .small 
      //We cannot directly get the dimensions from .small because of the 
      //width specified to 200px in the html. To get the actual dimensions we have 
      //created this image object. 
      var image_object = new Image(); 
      image_object.src = jQuery(".small").attr("src"); 

      //This code is wrapped in the .load function which is important. 
      //width and height of the object would return 0 if accessed before 
      //the image gets loaded. 
      native_width = image_object.width; 
      native_height = image_object.height; 
     } 
     else 
     { 
      //x/y coordinates of the mouse 
      //This is the position of .magnify with respect to the document. 
      var magnify_offset = jQuery(this).offset(); 
      //We will deduct the positions of .magnify from the mouse positions with 
      //respect to the document to get the mouse positions with respect to the 
      //container(.magnify) 
      var mx = e.pageX - magnify_offset.left; 
      var my = e.pageY - magnify_offset.top; 

      //Finally the code to fade out the glass if the mouse is outside the container 
      if(mx < jQuery(this).width() && my < jQuery(this).height() && mx > 0 && my > 0) 
      { 
       jQuery(".large").fadeIn(100); 
      } 
      else 
      { 
       jQuery(".large").fadeOut(100); 
      } 
      if(jQuery(".large").is(":visible")) 
      { 
       //The background position of .large will be changed according to the position 
       //of the mouse over the .small image. So we will get the ratio of the pixel 
       //under the mouse pointer with respect to the image and use that to position the 
       //large image inside the magnifying glass 
       var rx = Math.round(mx/jQuery(".small").width()*native_width - jQuery(".large").width()/2)*-1; 
       var ry = Math.round(my/jQuery(".small").height()*native_height - jQuery(".large").height()/2)*-1; 
       var bgp = rx + "px " + ry + "px"; 

       //Time to move the magnifying glass with the mouse 
       var px = mx - jQuery(".large").width()/2; 
       var py = my - jQuery(".large").height()/2; 
       //Now the glass moves with the mouse 
       //The logic is to deduct half of the glass's width and height from the 
       //mouse coordinates to place it with its center at the mouse coordinates 

       //If you hover on the image now, you should see the magnifying glass in action 
       jQuery(".large").css({left: px, top: py, backgroundPosition: bgp}); 
      } 
     } 
    }) 
}) 

}); 

外觀&感覺/高級/添加自定義CSS：

/*Some CSS*/ 
* {margin: 0; padding: 0;} 
.magnify {width: 200px; margin: 50px auto; position: relative; cursor: none} 

/*Lets create the magnifying glass*/ 
.large { 
    width: 175px; height: 175px; 
    position: absolute; 
    border-radius: 100%; 

    /*Multiple box shadows to achieve the glass effect*/ 
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
    0 0 7px 7px rgba(0, 0, 0, 0.25), 
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25); 

    /*hide the glass by default*/ 
    display: none; 
} 

/*To solve overlap bug at the edges during magnification*/ 
.small { display: block; }