jQuery - 如何在 Chrome 中通过鼠标移动调整图像大小？

Question

我编写了一个小脚本（JavaScript - jQuery），用于测试依赖于 mousemove 事件的图像调整大小操作。简而言之，其想法是单击图像一次，然后拖动光标。每次鼠标移动时，图像都会调整大小，其右下角“跟随”您的光标。

我遇到的问题是：在开始移动光标后，调整大小的效果有点不稳定。 1-2秒后，运行非常流畅。如果您停止移动光标一段时间然后再次移动，也会出现同样的情况。

这个问题似乎只发生在 Google Chrome 中，所以我的第一个想法是这与该浏览器的抗锯齿功能有关。但我不是专家。 图像相当大（宽度和高度 - 明智，而不是“KB” - 明智）

您可以在这里测试这个“迷你应用程序”：http://picselbocs.com/projects/helsinki-map-application/test.php

下面是代码：

<img src="Helsinki.jpg" id="map" style="width: 526px; height:300px; position: absolute; top:0; left:0" />

<script>
var drag = false;
(function(){  

    $('#map').on('click',function(){
        drag = true;
    });

    $(document).on('mousemove',function(e){
        if (drag)
            $('#map').css({ 'height': e.pageY, 'width': e.pageX });
    }); 

})();
</script>

如果有人可以提供这个问题的解决方案，我将不胜感激。

Answer 1

!function ($) { 
    "use strict";

    var Magnify = function (element, options) {
        this.init('magnify', element, options)
    } 
    Magnify.prototype = { 
        constructor: Magnify 
        , init: function (type, element, options) {
            var event = 'mousemove'
                , eventOut = 'mouseleave';

            this.type = type
            this.$element = $(element)
            this.options = this.getOptions(options)
            this.nativeWidth = 0
            this.nativeHeight = 0

            if(!this.$element.parent().hasClass('magnify')) {
                this.$element.wrap('<div class="magnify" \>');
                this.$element.parent('.magnify').append('<div class="magnify-large" \>');
            }           
            this.$element.siblings(".magnify-large").css("background","url('" + this.$element.attr("src") + "') no-repeat");

            this.$element.parent('.magnify').on(event + '.' + this.type, $.proxy(this.check, this));
            this.$element.parent('.magnify').on(eventOut + '.' + this.type, $.proxy(this.check, this));
        }