jquery - HTML/Jquery mousemove 图像序列

Question

我想制作一个全屏背景的网站。这个想法是一个图像序列正在播放，跟随鼠标位置（动画页面开始的左侧，动画页面结束的右侧）。因此，当您向左 - 向右 - 向左移动鼠标时，图像序列就像时间线一样向前和向后播放。

我尝试使用 HTML 中的区域映射来构建它，只是我必须创建 240 个地图，但坐标变得混乱（全屏/浏览器）。我知道在 jquery 中制作它会容易得多，但我不知道如何开始。

任何人都可以帮助我开始吗？预先感谢！

Answer 1

jsFiddle 演示

只需使用 CSS 即可使其全屏显示。

HTML：

<div id="mmGallery_container">
    <div id="mmGallery">
        // images here
    </div>
</div>

jQuery：

$(window).load(function(){
    // roXon mmGallery   
    MouseRelXpos = 0;  
    sumW = 0;
    
    // auto-SET mmGallery_container WIDTH ()
    $('#mmGallery img').each(function(){
        sumW += $(this).width(); // collect all images widths
        $('#mmGallery').width(sumW);//SET gallery WIDTH!
    });        
    // Calculate 'compensation speed': width difference between the gallery container and the gallery
    wDiff1 = $('#mmGallery_container').width();
    wDiff2 = $('#mmGallery').width();
    wDiff = (wDiff2/wDiff1)-1;  //(-1 is for the already existant container width)        
    //#
    
    $("#mmGallery_container").mousemove(function(e) {
        MouseRelXpos = (e.pageX - this.offsetLeft); // = mouse pos. 'minus' offsetLeft of this element       
    });
        
    var xSlider = $("#mmGallery");     // cache
    var posX = 0;
    setInterval(function(){
        posX += (- MouseRelXpos - posX) / 14; // 14 = speed (higher val = slower animation)
        xSlider.css({marginLeft:  Math.round(posX * wDiff) +'px' }); // instead 'marginLeft' use 'left' for absolute pos. #mmGallery
    }, 10); // 10 = loop timeout
});