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

Question

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

Answer 1

$(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});
    });                      


});

这是你想要的方式吗？http://jsfiddle.net/Aveendra/hp8xP/检查小提琴