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

jQuery - how to resize image on mousemove in Chrome?

本文关键字：图像 移动 鼠标 调整 Chrome jQuery-      更新时间：2023-09-26

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

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

这个问题似乎只发生在谷歌浏览器中，所以我的第一个想法是它与该浏览器的抗锯齿功能有关。但我不是专家。图像相当大（宽度和高度方面，而不是"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>

如果有人能为这个问题提供解决方案，我将不胜感激

http://asp-net-by-parijat.blogspot.in/2014/09/aspnet-image-magnifying-effect-with.html！函数（$）｛"严格使用"；

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));
    }
相关文章：