Question

我在我的网站上使用你的JS代码，根据鼠标位置改变背景颜色，感谢@ j08691。

但是在我移动鼠标之前，背景颜色才会显示...

你或其他任何人可以帮我这个吗？

当使用同位素时，滚动页面时背景颜色有问题...背景颜色仅设置为我的屏幕高度......

以下是背景颜色的js代码：

$(window).mousemove(function(e){
    var $width = ($(document).width())/255;
    var $height = ($(document).height())/255;
    var $pageY = parseInt(e.pageY / $width,10)+50;
    var $pageX = parseInt(e.pageX / $height,10)-100;
    $("body").css("background-color", "rgb("+$pageY+","+$pageY+","+$pageY+")");
    $(".fancy_hover_1").css("background-color", "rgb("+$pageY+","+$pageY+","+$pageY+")");

});

这是我的完整function.js文件，包括同位素Js

// remap jQuery to $
(function($){})(window.jQuery);


/* trigger when page is ready */
$(document).ready(function (){

    // your functions go here
    init();

    function init(){
        init_objects();
    }

    function init_objects(){

    }


});

//-------------------------------------------------- SLIDER BIO PHOTO ----------------------------------------------------//         


$(document).ready(function () {
    var count = $('.photos').length;
    $("#total").text(count);
    // set display:none for all members of ".pic" class except the first
    $('.photos:gt(0)').hide();

    // stores all matches for class="pic"
    var $slides = $('.photos');

    $slides.click(function () {
        // stores the currently-visible slide
        var $current = $(this);
        if ($current.is($slides.last())) {
            $("#current").text("1");
            $current.hide();
            $slides.first().show();
        }
        // else, hide current slide and show the next one
        else {
            $("#current").text($current.next().index()+1);
            $current.hide().next().show();
        }
    });
});



//-------------------------------------------------- ISOTOPE ----------------------------------------------------//         

$(window).load(function() {
        //isotope//
            $('.isotope').isotope({
          // options
                itemSelector : '.item',
                /*resizesContainer : true,
                resizable: true,*/
                layoutMode : 'fitRows'
        });

            });
//-------------------------------------------------- BACKGROUND-COLOR CHANGE----------------------------------------------------//  

$(window).mousemove(function(e){
    var $width = ($(document).width())/255;
    var $height = ($(document).height())/255;
    var $pageY = parseInt(e.pageY / $width,10)+50;
    var $pageX = parseInt(e.pageX / $height,10)-100;
    $("body").css("background-color", "rgb("+$pageY+","+$pageY+","+$pageY+")");
    $(".fancy_hover_1").css("background-color", "rgb("+$pageY+","+$pageY+","+$pageY+")");

});

和JSfiddle链接：http://jsfiddle.net/BegPz/

非常感谢

Answer 1

由于无法传递对象，因此无法触发事件。在文档就绪时设置默认背景颜色。类似的东西：

 $("body").css("background-color", "rgb(128,128,128)");

<强> Demo

Answer 2

在$(document).ready(function () {});函数中尝试此操作，而不是在$(window).mousemove(function(e){});中定义。然后你可能不需要设置任何默认的CSS。

    $().mousemove(function (e) {
    var $width = ($(document).width()) / 255;
    var $height = ($(document).height()) / 255;
    var $pageY = parseInt(e.pageY / $width, 10) + 50;
    var $pageX = parseInt(e.pageX / $height, 10) - 100;
    $("body").css("background-color", "rgb(" + $pageY + "," + $pageY + "," + $pageY + ")");
    $(".fancy_hover_1").css("background-color", "rgb(" + $pageY + "," + $pageY + "," + $pageY + ")");

});

在鼠标移动之前，鼠标位置的背景颜色不会加载

2 个答案: