Javascript 不同的图像淡入/淡出取决于鼠标在页面上的位置

我想看看是否有一种方法，使用jQuery或Javascript，生成四个不同的图像，根据鼠标是否在左上角、右上角、左下角、右下角象限，每个图像分别快速（比如1000ms）和缓慢（比如4000ms）淡入淡出，图像在相应象限中淡入/淡出，但更靠近中心（因此，如果所有图像同时淡入，则它们部分重叠）。图像应该位于body标记中的所有内容后面，但在html呈现的空白区域和任何不透明区域中都可见。这可能吗

$(function(){

    var width=$(window).width();
    var height =$(window).height();
    $('.image_container').css('marginLeft',''+((width-400)/2)+'px');
    $('.image_container').css('marginTop',''+((height-400)/2)+'px');


    $(".conner_boxes").mouseenter(function(){
        $('.image_container > img').eq($(this).index()).animate({opacity:.2});
    }).mouseleave(function(){
        $('.image_container > img').eq($(this).index()).animate({opacity:1});
    });                      


});

---

这是你想要的方式吗？检查fiddle

粘贴你的html，使其精确地工作。目前没有html，只是一个概念。我要尝试一下。在html文档中，小提琴中的JavaScript需要放在哪里？是否需要任何其他代码（例如脚本标记、匿名函数）？您所要做的就是使用与小提琴中相同的代码。我还将在提琴中添加一些注释。因此，这将使它更容易理解。