jQuery - 如何在Chrome中调整mousemove上的图像大小？

我已经整理了一个小脚本（JavaScript-jQuery），用于测试依赖于mousemove事件的图像大小调整操作。总之，想法是点击一次图像，然后拖动光标。图像大小调整为每次鼠标移动，其右下角“跟随”您的光标。jQuery - 如何在Chrome中调整mousemove上的图像大小？

我遇到的问题是：刚开始移动光标后，调整大小的工作有点生涩。 1-2秒后，运行非常顺利。如果您停止移动光标一点，然后再移动一次，也会出现相同的情况。

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

您可以测试这个 “迷你应用程序” 在这里：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>

如果任何人都可以提供解决这个问题，我将不胜感激。

来源

2012-03-12 Andrei Oniga

我已经检查了2台不同的计算机和情况是一样的，我 – user544262772 2012-03-12 08:42:59

没有问题。你有没有尝试过使用Chrome或其他东西？因为它在Firefox中正常工作。 – 2012-03-12 08:47:29

我其实不认为你可以解决这个问题，因为这可能是一些重绘/回流优化，但你可以使用Google Speed Tracer：http：//code.google.com/webtoolkit/speedtracer/找出那一刻到底发生了什么。 – m90 2012-03-12 09:04:14

http://asp-net-by-parijat.blogspot.in/2014/09/aspnet-image-magnifying-effect-with.html ！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)); 
    }

来源

2014-09-17 05:55:02

jQuery - 如何在Chrome中调整mousemove上的图像大小？

回答

相关问题