首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >HTML/Jquery mousemove图像序列

HTML/Jquery mousemove图像序列
EN

Stack Overflow用户
提问于 2012-05-12 14:25:57
回答 1查看 1.1K关注 0票数 2

我想做一个全屏背景的网站。其思想是,一个图像序列正在播放,跟随鼠标位置(动画页面开始的左侧,动画页面结束的右侧)。所以,当你移动你的鼠标左右,图像序列是向前和向后播放,就像一个时间线。

我试着用HTML中的区域映射来构建它,只是我必须创建240张地图,但是坐标变得混乱了(全屏/浏览器)。我知道在jquery中使用它会容易得多,但我不知道如何开始。

有人能帮我开始吗?提前感谢!

EN

回答 1

Stack Overflow用户

发布于 2012-05-12 14:31:01

http://jsfiddle.net/DEB5C/

只需播放CSS,使其全屏。

HTML:

代码语言:javascript
复制
<div id="mmGallery_container">
    <div id="mmGallery">
        // images here
    </div>
</div>

jQuery:

代码语言:javascript
复制
$(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
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10564577

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档