圖像縮放JS（與背景圖像，而不是img）

我想要寫我自己的圖像縮放JS代碼（類似於http://www.elevateweb.co.uk/image-zoom/examples#inner-zoom），但這個和所有其他插件的問題是，它依賴於img標籤，而我想要使用背景圖像來提供相同的效果。圖像縮放JS（與背景圖像，而不是img）

我創建了一個jsFiddle我在哪裏，但我有問題試圖重新創建鼠標移動。我認爲，當你懸停時，它可以縮放背景圖像（或通過JS替換url src與更大的圖像），但我不能解決如何跟蹤圖像/容器的邊緣，而不是圖像跟隨指針。

https://jsfiddle.net/x69tk48s/

$('.inner').mousemove(function(e) { 
    $('.each-image .bg').offset({ 
     left: e.pageX, 
     top: e.pageY 
    }); 
}); 

$('.inner').on('mouseleave', function() { 
    $('.each-image .bg').css({ 
     left: 0, 
     top: 0 
    }); 
});

有什麼想法？

來源

2016-06-24 John the Painter

數學並不完全正確（但），但這裏有一個關於如何完成它的粗略想法：https://jsfiddle.net/3cebzudv/2/（通過在左上角進行鼠標移動以獲得粗略的想法）。

基本上，只是在mouseenter上縮放背景圖像，然後使用mousemove上的backgroundPosition屬性重新定位背景圖像。

來源

2016-06-24 16:00:25

非常感謝Brian的幫助。我得到你。我想我需要弄清楚「邊緣」是什麼，所以它不會縮放圖像。 –

對，你需要根據鼠標在「容器」中的位置進行一些計算，並將其與需要處理的圖像進行比較。如果事先知道圖像尺寸，這將更容易，但如果不是，則可以動態讀取圖像尺寸（一旦加載後），然後將所有這些值用作計算的基礎。 –

圖像縮放JS（與背景圖像，而不是img）

回答

相關問題