Question

有人可以解释一下如何像本页第一个例子那样进行悬停缩放http://www.elevateweb.co.uk/image-zoom/examples（不是代码而是概念上的）？

Answer 1

当然它的作品是这样的：

<强> HTML

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

请注意两个图像，src和数据缩放图像。一个是较小的pic，另一个是较大的。

<强> 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

Answer 2

<!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>

import jquery.js
import jquery.elevatezoom.js

放大图片javascript

2 个答案: