ズーム画像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とdata-zoom-imageという2つの画像に注意してください。 1つは小さい写真で、もう1つは大きい写真です。

あなたはelevateZoom（）関数がどのように動作するかを見ることができます下のソースコード内のJavaScript

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

。かなり長いですが、ストレート・フォワードです。画像の上にマウスを置くと、コードはマウスの位置をズームインして横にずらした新しい画像を作成します。かなりクール！

ソースコード： https://github.com/elevateweb/elevatezoom/blob/master/jquery.elevatezoom.js

出典

2016-03-30 01:51:17 JordanHendrix

ズーム画像javascript

答えて

関連する問題