缩放图像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

回答

相关问题