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上的圖像大小？

回答

相關問題