4

jqueryを使用して写真を拡大するにはどうすればよいのか疑問に思っていました。

このウェブサイトのようなもの、

リンクテキスト

大きな画像をクリックするとズームインし、カーソルを移動してズームインしながら写真の他の部分を見ることができます。

誰かが私にリンクを見せたり、私を正しい方向に導いてくれたら幸いです。

4

5 に答える 5

19

ズームインしません。実際に起こっているのは、ズームテキストをクリックすると、div内の画像がその画像のより大きなバージョンに置き換えられることです。そして、オーバーフローは非表示に設定されます。

巧妙なJavaScriptとDOM処理を使用してカーソルを移動すると、画像はそれに応じて比較的移動するだけで、実際に画像を拡大しているような効果が得られます。

簡単な例を作成してみます。

編集

申し訳ありませんが、しばらく時間がかかりましたが、ここにあります：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Example</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
                var fullWidth = 864; // Width in pixels of full-sized image
                var fullHeight = 648; // Height in pixels of full-sized image
                var thumbnailWidth = 389;  // Width in pixels of thumbnail image
                var thumbnailHeight = 292;  // Height in pixels of thumbnail image

                // Set size of div
                $('#picture').css({
                        'width': thumbnailWidth+'px',
                        'height': thumbnailHeight+'px'
                });

                // Hide the full-sized picture
                $('#full').hide();

                // Toggle pictures on click
                $('#picture').click(function() {
                        $('#thumbnail').toggle();
                        $('#full').toggle();
                });

                // Do some calculations
                $('#picture').mousemove(function(e) {
                        var mouseX = e.pageX - $(this).attr('offsetLeft'); 
                        var mouseY = e.pageY - $(this).attr('offsetTop'); 

                        var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
                        var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);

                        $('#full').css({
                                'left': '-' + posX + 'px',
                                'top': '-' + posY + 'px'
                        });
                });
        });
    </script>

    <style type="text/css">
        #picture {
                overflow: hidden;
                position: relative;
                border: 1px solid #000000;
        }

        #thumbnail {
                cursor: pointer;
        }

        #full {
                position: relative;
                cursor: crosshair;
        }
    </style>
</head>

<body>
    <div id="picture">
        <img alt="" id="thumbnail" src="http://img202.imageshack.us/img202/8403/93629325.jpg" />
        <img alt="" id="full" src="http://img111.imageshack.us/img111/4734/tbmecsekyellowflower.jpg" />
    </div>
</body>
</html>

それに応じて、サムネイルとフルサイズの画像の幅と高さを調整する必要があります。ただし、上記をコピーして貼り付けるだけで、imageshackでホストされている画像の例を確認できます。

于 2009-10-17T09:18:18.623 に答える
3

gzoom、miniZoomPan、WarpZoom、およびImage Detailプラグインはすべて、この種のことを簡単にします。あなたはそれらすべてをここで見つけることができます：

http://plugins.jquery.com/taxonomy/term/1848

おそらく他にもあります。

お役に立てば幸いです。

編集：前の質問には、jQuery製品のズームプラグインとして最適なものは何ですか？

于 2009-10-17T09:25:47.210 に答える
1

必要なのは単なるズームではありません。ただし、固定ビューポート内でのズームとパン機能。あなたが提供したウェブサイトはおそらく最初からそれをコーディングします。まったく同じではないものを見つけましたが、こちらをご覧ください。

その間、私はSbm007の例を見たいと思っています。

于 2009-10-17T09:24:26.990 に答える
0

Asos.comはゼロからコーディングしました。Firebugでどのようにコーディングしたかをご覧ください：http ：//www.asos.com/assets/asosCom/js/libs/asos.js.utils.productpage.js

于 2010-01-19T14:29:02.817 に答える
0

ちょっとアミール私は1つのチュートリアルリンクを追加しています、そしてそれはあなたの検索のための適切な解決策です、次のリンクからチュートリアルを試してください、それはまた他の3つの異なる方法で画像を拡大するのに役立ちます...

http://www.jacklmoore.com/zoom/

私はこれを試しましたが、正常に動作しています。

于 2015-06-04T09:49:08.503 に答える