Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Проблемы с разрешением экрана и jquery javascript (https://javascript.ru/forum/dom-window/28308-problemy-s-razresheniem-ehkrana-i-jquery-javascript.html)

raffx 14.05.2012 18:03

Проблемы с разрешением экрана и jquery javascript
 
На сайте есть кружок с надписью "Участвуй в акции:..." Там происходит анимация при движении мыши. Проблема в том, что позиционируется этот кружок по-разному в зависимости от разрешения монитора. В html и css привязки к разрешению нет. Подумываю на глючный скрипт. Только вот взял я его в инете, а разбираюсь в JS очень плохо.

Если кто шарит, подскажите пожалуйста, нет ли в скрипте привязки к разрешению экрана?

(function($){ 
    $.fn.plaxmove = function(options) { 
 
        this.defaults = { 
            ratioH: 0.2, 
            ratioV: 0.2, 
            invertH: false, 
            invertV: false, 
            reversed: false 
        } 
         
        var settings = $.extend({},this.defaults,options), 
            layer = $(this), 
            center = { 
                x: $('html').width()/2-layer.width()/2, 
                y: $('html').height()/2-layer.height()/2 
            }, 
            y0 = layer.offset().top, 
            x0 = layer.offset().left; 
             
        if(settings.reversed) { 
 
            if(settings.invertH) 
                var eqH = function(e) { 
                    return x0-(e.pageY - center.y)*settings.ratioH 
                } 
             
            else  
                var eqH = function(e) { 
                    return x0+(e.pageY - center.y)*settings.ratioH 
                } 
             
            if(settings.invertV) 
                var eqW = function(e) { 
                    return y0-(e.pageX - center.x)*settings.ratioV 
                } 
            else 
                var eqW = function(e) { 
                    return y0+(e.pageX - center.x)*settings.ratioV 
                } 
 
        } 
         
        else { 
 
            if(settings.invertH) 
                var eqH = function(e) { 
                    return x0-(e.pageX - center.x)*settings.ratioH 
                } 
             
            else  
                var eqH = function(e) { 
                    return x0+(e.pageX - center.x)*settings.ratioH 
                } 
             
            if(settings.invertV) 
                var eqW = function(e) { 
                    return y0-(e.pageY - center.y)*settings.ratioV 
                } 
            else 
                var eqW = function(e) { 
                    return y0+(e.pageY - center.y)*settings.ratioV 
                }         
 
        } 
 
        $('html').on('mousemove', function(e) { 
 
                x = eqH(e) 
                y = eqW(e) 
 
                $(layer).css({top:y,left:x}) 
 
        }) 
 
    }; 
})(jQuery);

raffx 14.05.2012 20:02

Как выяснилось, привязки к разрешению нет. Однако видно, как скрипт смещает элемент (если обновить страницу предварительно отодвинув курсор мыши за пределы окна браузера, а потом подвигать мышью в окне).

Видимо это происходит из-за того, что скрипт при выполнении не учитывает предыдущие (выставленные в CSS) координаты объекта, а заменяет их своими координатами. Если это так, то как сделать, чтобы скрипт учитывал их?

paul1g 07.12.2012 16:53

Нужна позиция, а не смещение

18 y0 = layer.offset().top,
19 x0 = layer.offset().left;

замени на

y0 = layer.position().top,
x0 = layer.position().left;


Часовой пояс GMT +3, время: 12:39.