縮放圖像javascript

有人能解釋我如何做一個像本頁面第一個例子的懸停縮放http://www.elevateweb.co.uk/image-zoom/examples（不是用代碼，而是用概念）？縮放圖像javascript

2016-03-30 Merecol

-1

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8'/> 
    <title>jQuery elevateZoom Demo</title> 
    <script src='jquery-1.8.3.min.js'></script> 
    <script src='jquery.elevatezoom.js'></script> 
</head> 
<body> 
<h1>Basic Zoom Example</h1> 
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/> 

<br /> 
see more examples online <a href="http://www.elevateweb.co.uk/image-zoom/examples">http://www.elevateweb.co.uk/image-zoom/examples</a> 
<script> 
    $('#zoom_01').elevateZoom({ 
    zoomType: "inner", 
cursor: "crosshair", 
zoomWindowFadeIn: 500, 
zoomWindowFadeOut: 750 
    }); 
</script> 
</body> 
</html>

進口的jquery.js
進口jquery.elevatezoom.js

來源

2016-03-30 01:48:26

這無助於回答被問 – JordanHendrix

感謝您answers.What我不明白的問題是縮放圖像的尺寸和正常圖像之間的關係。爲什麼如果我將縮放後的圖像的尺寸放大，縮放變得不完美？ – Merecol

當然它的工作原理是這樣：

HTML

<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

請注意兩個圖像，src和數據縮放圖像。一個是較小的圖片，另一個是較大的圖片。

JAVASCRIPT

$("#zoom_01").elevateZoom(); 
- See more at: http://www.elevateweb.co.uk/image-zoom/examples#sthash.QKWe4Oou.dpuf

在下面的源代碼，你可以看到elevateZoom（）函數是如何工作的。它很長，但是直截了當。如果將鼠標懸停在圖片上，代碼會創建一個偏移到一側的新圖像，這是對鼠標位置的放大。很酷！

源代碼： https://github.com/elevateweb/elevatezoom/blob/master/jquery.elevatezoom.js

來源

2016-03-30 01:51:17 JordanHendrix

縮放圖像javascript

回答

相關問題