jquery mouseover for mouse parallaxing on mouse position

时间:2014-05-25 06:28:06

标签: jquery parallax

所以这是我的代码,

jQuery(doc­u­ment).ready(func­tion($){
        $(’#Par­al­lax’).mouse­move(
                func­tion(e){
                /* Work out mouse position */
                var off­set = $(this).off­set();
                var xPos = e.pageX - off­set.left;
                var yPos = e.pageY - off­set.top;

                /* Get per­cent­age positions */
                var mou­s­eX­Per­cent = Math.round(xPos / $(this).width() * 100);
                var mou­seY­Per­cent = Math.round(yPos / $(this).height() * 100);

                /* Pos­i­tion Each Layer */
                $(this).chil­dren(‘img’).each(
                        func­tion(){
                                var diffX = $(’#Par­al­lax’).width() - $(this).width();
                                var diffY = $(’#Par­al­lax’).height() - $(this).height();

                                var myX = diffX * (mou­s­eX­Per­cent / 100);
                                var myY = diffY * (mou­seY­Per­cent / 100);
                                var cssObj = {
                                        ‘left’: myX + ‘px’,
                                        ‘top’: myY + ‘px’
                                }
                                $(this).anim­ate({left: myX, top: myY},{dur­a­tion: 50, queue: false, eas­ing: ‘lin­ear’});

                        }
                );

                }
        );
});

这有效,但我需要它来注册整个页面的鼠标位置,而不仅仅是当直接悬停在div #parallax上时,我是jquery的新手,我不知道要改变它的内容。

1 个答案:

答案 0 :(得分:0)

您可以将事件处理程序绑定到$(document)而不是$('#Par­al­lax')。这样,只要鼠标移动到文档中的任何位置,就会运行处理程序。