JavaScript放大鏡

我在JavaScript中構建了一個放大鏡，當我點擊它或單擊並拖動它時，效果很好，但它不應該隱藏在屏幕上。JavaScript放大鏡

$(".menu-left-preview-box-preview").bind('click', function (e) { 
    window.location = "page" + ($(this).index() + 1) + ".html"; 
}); 

var native_width = 0; 
var native_height = 0; 
var magnifyIsMouseDown = false; 
$(".magnify").parent().mousedown(function (e) { 
    magnifyIsMouseDown = true; 
}); 
$(".magnify").mousemove(function (e) { 
    if (magnifyIsMouseDown) { 
     if (!native_width && !native_height) { 
      var image_object = new Image(); 
      image_object.src = $(".small").attr("src"); 
      native_width = image_object.width; 
      native_height = image_object.height; 

     } else { 
      var magnify_offset = $(this).offset(); 
      var mx = e.pageX - magnify_offset.left; 
      var my = e.pageY - magnify_offset.top; 

      if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) { 
       $(".large").fadeIn(100); 

      } else { 
       $(".large").fadeOut(100); 
      } 
      if ($(".large").is(":visible")) { 
       var rx = Math.round(mx/$(".small").width() * native_width - $(".large").width()/2) * -1; 
       var ry = Math.round(my/$(".small").height() * native_height - $(".large").height()/2) * -1; 
       var bgp = rx + "px " + ry + "px"; 

       var px = mx - $(".large").width()/2; 
       var py = my - $(".large").height()/2; 
       $(".large").css({ left: px, top: py, backgroundPosition: bgp }); 
      } 
     } 
    } 
}); 

$(".magnify").parent().mouseup(function (e) { 
    magnifyIsMouseDown = false; 
    $(".large").fadeOut(100); 
}); 
$(".magnify").parent().mouseleave(function (e) { 
    $(".large").fadeOut(100); 
}); 

manageSlide();

默認情況下，放大鏡必須在屏幕上。放大鏡可以拖動，掉落後必須保持在放置位置。

點擊並拖動放大鏡效果不錯，但不應該隱藏在屏幕上。它應該在屏幕上。

提供具有該圓圈的放大鏡柄（設計中）。

工作例如：http://jsfiddle.net/mohsin80/4ww8efx5/

來源

2015-09-22 Mohsin Kureshi

爲什麼你把JavaScript代碼放在HTML字段中的'script'標籤內？閱讀起來非常困難，並且給你/我們毫無利益。 –

我把它放在scrip標籤中，那麼它將無法正常工作，這就是爲什麼... –

它不會在腳本標籤之外工作，因爲您手動收聽'window.onLoad'。 Jsfiddle默認在'onLoad'中包裝你的代碼。在左側的菜單中，將下拉菜單中的onLoad更改爲「無包裝 - 」，然後您可以將JS從腳本標記中移出，以幫助其他人幫助您。您也可以通過小提琴拉動JQuery，因此無需將其拉入腳本標記中。最後，如果您突出顯示您的代碼並按Shift鍵，它會自動格式化它。正確格式化的代碼有助於他人閱讀，反過來幫助你。坦率地說，小提琴是痛苦的。 – ste2425

我通過if (isDragging) {取代if (magnifyIsMouseDown) {並創建了以下方法：

var isDragging = false; 
$(".magnify").parent().mouseup(function(e) { 
    isDragging = false; 
}); 
$(".magnify").parent().mousedown(function(e) { 
    isDragging = true; 
});

要使用jQuery模擬拖動事件。

這裏是fiddle。希望它有幫助:)

來源

2015-09-22 14:01:04 RageAgainstTheMachine

感謝它會工作... –

hello pedrop mendes我點擊放大鏡手柄然後我的鼠標光標移動到放大鏡圓的中心，但我不想這樣。我希望它可以在手柄上拖動並圈選兩者。工作演示：http：//jsfiddle.net/mohsin80/4ww8efx5/2/ –

這個演示在桌面上工作正常，但在移動設備放大鏡拖動不工作PLZ幫助我。 –

JavaScript放大鏡

回答

相關問題