Question

我很擅长数学，所以我无法弄清楚缩放工作需要什么。你看，当第一次点击时，它按预期工作（它放大到所需的位置）。但是，如果您尝试多次单击，则不会放大到所需位置。

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

计算new_x和new_y的方法有问题。

JavaScript：缩放确实按预期工作

1 个答案: