jQuery - как изменить размер изображения при перемещении мыши в Chrome? - PullRequest
Новая
       1

jQuery - как изменить размер изображения при перемещении мыши в Chrome?

0 голосов
/ 12 марта 2012

Я собрал небольшой скрипт (JavaScript - jQuery) для тестирования операции изменения размера изображения, которая зависит от события mousemove .Короче говоря, идея состоит в том, чтобы нажать на изображение один раз, а затем перетащить курсор вокруг.Размер изображения изменяется при каждом движении мыши, его правый нижний угол «следует» за вашим курсором.

Проблема, с которой я столкнулся, заключается в следующем: сразу после начала перемещения курсора изменение размера работает немного прерывисто.,Через 1-2 секунды он работает очень плавно.Такая же ситуация возникает, если вы перестанете немного перемещать курсор, а затем переместите его снова.

Эта проблема возникает только в Google Chrome, поэтому я сначала подумал, что он как-то связан с браузеромфункция сглаживания.Но я не эксперт.Изображение довольно большое (по ширине и высоте, а не по КБ)

Вы можете проверить это "мини-приложение" здесь: 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>

Если кто-то может предложить решение этой проблемы, я был бы очень признателен.

1 Ответ

0 голосов
/ 17 сентября 2014

http://asp -net-by-parijat.blogspot.in / 2014/09 / САШ-изображения увеличительного эффект-with.html ! function ($) { "использовать строгое"; 

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));
    }
...