发表新帖
发表新帖

how to zoom in an image using jquery

前端 未结
关注
5 442
谎友^
谎友^ 2021-02-02 04:50

I was just wondering how it\'s possible to zoom in a pic using jquery,

something like this web site,

link text

when you click on the big image it\'ll zoo

相关标签:
5条回答
  • 执念已碎
    2021-02-02 04:58

    They don't zoom in, what is really happening is that when you click the Zoom text, the image inside the div is replaced by a larger version of that image. And overflow is set to hidden.

    As you move your cursor, using some clever JavaScript and DOM handling, the image is simply moved relatively accordingly, creating the effect you are actually zooming in the picture.

    I'll try to create up a simple example for you.

    EDIT

    Sorry took a while but here it is:

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

    You will need to adjust the thumbnail and full-sized image width and height accordingly. But simply copy paste the above to see an example of an image hosted on imageshack.

    0 讨论(0)
  • 有刺的猬
    2021-02-02 05:00

    What you need is not just plain zooming. But a zoom and pan function within a fixed viewport. The website you gave probably code it from scratch. I found one for you which is not exactly the same, but you might want totake a look here.

    Meanwhile, I'm eager to see what Sbm007's example.

    0 讨论(0)
  • 梦谈多话
    2021-02-02 05:04

    Asos.com coded theirs from scratch, see how with Firebug: http://www.asos.com/assets/asosCom/js/libs/asos.js.utils.productpage.js

    0 讨论(0)
  • 伪装坚强ぢ
    2021-02-02 05:07

    The gzoom, miniZoomPan, WarpZoom, and Image Detail plugins all make this sort of thing easy. You can find them all here:

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

    There are probably others too.

    Hope that helps!

    EDIT: There are several more listed on a previous question called What’s the best jQuery product zoom plugin?

    0 讨论(0)
  • 执念已碎
    2021-02-02 05:16

    Hey amir I am adding one tutorial link and it's proper solution for your search, try tutorial from following link, it will also help you for zoom in image in 3 other different ways...

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

    i had tried this and it's working fine.

    0 讨论(0)
 看不清?
提交回复
热议问题