如何编写一个适用于mousemove事件的函数并在文档就绪中调用它？

Question

我有一个功能可以在屏幕上移动鼠标指针时移动屏幕上的对象。为此，我在$（document）.mousemove函数中调用了该函数。相反，我需要在$（document）.ready中调用我的函数，以便我的函数已经具有mousemove属性并在被调用时执行。

这是我的代码..

＆＃13;

＆＃13;

(function ($) {
                $.fn.imgParallax = function (e) {
                    var d = e.effspeed;
                    var centerpos = $('p.imagemove').width() / 2;
                    var middlepos = $('p.imagemove').height() / 2;
                    var leftpos = e.pageX - centerpos;
                    var toppos = e.pageY - middlepos;
                    var xpos = (centerpos - (leftpos / d));
                    var ypos = (middlepos - (toppos / d));
                    $(this).css('left', xpos + 'px');
                    $(this).css('top', ypos + 'px');
                };
            })(jQuery);
            $(document).mousemove(function (e) {
                $(".a").imgParallax({
                    effspeed: 16,
                    pageX: e.pageX,
                    pageY: e.pageY
                });
                $(".b").imgParallax({
                    effspeed: 12,
                    pageX: e.pageX,
                    pageY: e.pageY
                });
                $(".c").imgParallax({
                    effspeed: 6,
                    pageX: e.pageX,
                    pageY: e.pageY
                });
                $(".d").imgParallax({
                    effspeed: 18,
                    pageX: e.pageX,
                    pageY: e.pageY
                });
            });

＆＃13;

 body {
                overflow: hidden;
                background: black;
            }
            p {
                position: relative;
                height: 200px;
                margin: 0 auto;
            }
            .a, .b, .c, .d {
                position: absolute;
                display: block;
                left: 50%;
                top: 50%;
            }
            .b {
                margin-left: -325px;
                margin-top: -284px;
            }
            .a {
                margin-left: -444px;
                margin-top: -132px;
            }
            .c {
                width: 539px;
                height: 498px;
                margin-left: -265px;
                margin-top: -250px;
            }
            .d {
                width: 1132px;
                height: 313px;
                margin-left: -500px;
                margin-top: -60px;
            }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="imagemove">
            <span class="d q"><img src="http://web2developer.in.md-in-26.webhostbox.net/themes/ideathemes/awesome-ideas/wp-content/uploads/revslider/home_slider/background.png"></span>
            <span class="a q"><img src="http://web2developer.in.md-in-26.webhostbox.net/themes/ideathemes/awesome-ideas/wp-content/uploads/revslider/home_slider/text_back.png"></span>
            <span class="b q"><img src="http://web2developer.in.md-in-26.webhostbox.net/themes/ideathemes/awesome-ideas/wp-content/uploads/2016/03/text_front.png"></span>
            <span class="c q"><img src="http://web2developer.in.md-in-26.webhostbox.net/themes/ideathemes/awesome-ideas/wp-content/uploads/2016/03/blur.png"></span>

        </p>

＆＃13;

＆＃13;

＆＃13;

(function ($) {
            $.fn.imgParallax = function (e) {
                var d = e.effspeed;
                var centerpos = $('p.imagemove').width() / 2;
                var middlepos = $('p.imagemove').height() / 2;
                var leftpos = e.pageX - centerpos;
                var toppos = e.pageY - middlepos;
                var xpos = (centerpos - (leftpos / d));
                var ypos = (middlepos - (toppos / d));
                $(this).css('left', xpos + 'px');
                $(this).css('top', ypos + 'px');
                console.log(d);
            };
        })(jQuery);
        $(document).mousemove(function (e) {
            $(".a").imgParallax({
                effspeed: 16,
                pageX: e.pageX,
                pageY: e.pageY
            });
        });

＆＃39; exspeed＆＃39;实际上是确定当鼠标指针移动时对象沿着屏幕移动的速度。 ＆＃39; pageX属性＆＃39;和＆＃39; pageY＆＃39;是得到指针坐标。

Answer 1

如果你的html页面如果你可以添加一个div来包装整个boddy部分尝试使用以下代码

$(document).ready(function() {
    $("#divID").mouseover(function () {
       //Your code goes here
    });
});

Answer 2

像这样在文档就绪上触发鼠标移动事件。这将为它所需的mousemove事件对象提供视差功能。

$(document).ready(function() { 
    $(document).trigger("mousemove"); // Trigger a "fake" mousemove event
});
$(document).mousemove(parallax);

function parallax(e) {
    console.log("hi");
}