JavaScript：缩放确实可以正常工作

Question

I suck at math so I cannot figure out what is required to make the zooming work properly. 我在数学上很烂，所以我不知道要正确执行缩放需要什么。 You see, when clicked for the first time, it works as intended (it zooms in to the desired position). 您会看到，第一次单击时，它会按预期工作（放大到所需位置）。 But if you try to click more than once it won't zoom in to the desired position. 但是，如果您尝试单击多次，则不会放大到所需位置。

Here's the code (also provided at http://jsfiddle.net/XVmNU/ ) 这是代码（也在http://jsfiddle.net/XVmNU/提供）

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            html, body {
                height: 100%;
            }

            body {
                overflow: hidden;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script>
            (function ($) {
                var scale = 1;

                $(window).load(function () {
                    $('img:first').click(function (e) {
                        scale *= 1.5;

                        var w = $(this).width(),
                            h = $(this).height();

                        var new_w = w * scale,
                            new_h = h * scale;

                        var x = e.pageX,
                            y = e.pageY;

                        var new_x = Math.round(x / (w / new_w)),
                            new_y = Math.round(y / (h / new_h));

                        new_x = (0 - (new_x - x)),
                        new_y  = (0 - (new_y - y));    

                        $(this).animate({
                            left: new_x,
                            top: new_y,
                            width  : new_w,
                            height : new_h
                        }, 'fast');
                    });
                });
            })(jQuery);    
        </script>
    </head>
    <body>
        <img src="http://www.worldpress.org/images/maps/world_600w.jpg" style="position: absolute; left: 0px; top: 0px;"/>
    </body>
</html>

Answer 1

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            html, body {
                height: 100%;
            }

            body {
                overflow: hidden;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script>
            (function ($) {
                var scale = 1;

                $(window).load(function () {
                    $('img:first').click(function (e) {
                        scale *= 1.5;

                        var w = $(this).width(),
                            h = $(this).height();

                        var new_w = w * scale,
                            new_h = h * scale;

                        var x = e.pageX,
                            y = e.pageY;

            var new_x=Math.round([x-($(this).position().left)]*(1-scale)+$(this).position().left),
                new_y=Math.round([y-($(this).position().top)]*(1-scale)+$(this).position().top);


                        $(this).animate({
                            left: new_x,
                            top: new_y,
                            width  : new_w,
                            height : new_h
                        }, 'fast');
                    });
                });
            })(jQuery);    
        </script>
    </head>
    <body>
        <img src="http://www.worldpress.org/images/maps/world_600w.jpg" style="position: absolute; left: 0px; top: 0px;"/>
    </body>
</html>

is is something wrong with your method to compute the new_x and new_y. 您的计算new_x和new_y的方法有问题。

JavaScript：缩放确实可以正常工作

问题描述

1 个解决方案

解决方案1
0 2011-02-17 03:58:19

JavaScript：缩放确实可以正常工作

问题描述

1 个解决方案

解决方案1 0 2011-02-17 03:58:19

解决方案1
0 2011-02-17 03:58:19