jQuery - Chrome의 mousemove에서 이미지 크기를 조정하는 방법

mousemove 이벤트에 종속 된 이미지 크기 조정 작업을 테스트하기 위해 작은 스크립트 (JavaScript - jQuery)를 작성했습니다. 즉, 이미지를 한 번 클릭 한 다음 커서를 주위로 끕니다. 이미지는 마우스가 움직일 때마다 크기가 조정되고, 오른쪽 아래 모서리가 커서를 따라갑니다.jQuery - Chrome의 mousemove에서 이미지 크기를 조정하는 방법

내가 만난 문제는 다음과 같습니다. 바로 커서를 움직이면 크기가 조금씩 움직입니다. 1 ~ 2 초가 지나면 매우 원활하게 작동합니다. 커서를 조금 움직이면 멈추고 다시 움직이면 같은 상황이 발생합니다.

이 문제는 Google 크롬에서만 발생하는 것으로 보입니다. 그래서이 브라우저의 앤티 앨리어싱 기능과 관련이 있다고 생각합니다. 하지만 난 전문가가 아니야.

<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://picselbocs.com/projects/helsinki-map-application/test.php

그리고 울부 짖는 코드입니다 :

이 현재이 "미니 응용 프로그램을"테스트 할 수 있습니다

이 - 이미지는 (현명하지 "KB"-wise 폭 & 높이) 매우 큰

누구든지이 문제에 대한 해결책을 제시 할 수 있다면 크게 감사하겠습니다.

출처

2012-03-12 Andrei Oniga

나에게 아무런 문제가 없습니다. – user544262772

두 대의 컴퓨터에서 확인했는데 상황은 같습니다. Chrome이나 다른 것을 사용해 보셨습니까? 왜냐하면 그것은 Firefox에서 잘 작동하기 때문입니다. –

실제로이 문제를 해결할 수있을 것이라고 생각하지 않습니다. 다소 재 칠하기/리플 로우 오버 최적화이지만 Google Speed Tracer를 사용할 수는 있습니다. http://code.google.com/webtoolkit/speedtracer/ 그 시점에서 실제로 어떤 일이 일어나고 있는지 알아보십시오. – m90

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에서 이미지 크기를 조정하는 방법

답변

관련 문제