0
このページの最初の例のようにホバーズームを行う方法を教えてもらえますか？http://www.elevateweb.co.uk/image-zoom/examples（コードではなく概念的に）？ズーム画像javascript
A
答えて
-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このよう
1
確かにその作品：
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
これは – JordanHendrix
は私が理解していないanswers.Whatためにありがとう尋ねられた質問に答えるために何もしないズーム画像の大きさと通常の画像との関係でありますなぜズームインされた画像のディメンションを拡大すると、ズームが不完全になりますか？ – Merecol