jSfiddle demo

以下是完整的代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<style type="text/css">

*{padding:0px;margin:0px;}
body{
    font-family:Century Gothic;
    background:#000;
    font-size:15px;
    color:#fff;
}

/* ***** mmGallery ***** */

#mmGallery_container{
    position:relative;
    margin:20px auto;
    height:120px;
    width:500px;
    overflow:hidden;
}
#mmGallery{
    cursor:col-resize;
    position:relative;
}
#mmGallery img{
    position:relative;
    float:left;
}

#test{
position:relative;
width:500px;
margin:0 auto;
}

</style>
<script type="text/javascript">
$(document).ready(function() {

    // auto-SET mmGallery_container WIDTH ()
    $(window).load(function(){
        sumW = 0;
        $('#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

        //################## TEST (delete this)
        countCh = $('#mmGallery').children().length;
        offL = this.offsetLeft;
        $('#test').html( 
            'mmGallery offsetLeft: ' + offL + 
            '<br>Mouse Right Relative position: ' + MouseRelXpos + 'px' +
            '<br>Retrieved: ' + countCh + ' childrens inside div#mmGallery.' +
            '<br>mmGallery width: ' + sumW + 'px width. (Sum of all image widths)' +
            '<br>Compensation Speed: ' + wDiff
        );
        //####################### END TEST
    });

    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

});

</script>

</head>
<body>

<div id="mmGallery_container">
    <div id="mmGallery">
        <img src="http://dummyimage.com/110x120/cf5/fff"/>
        <img src="http://dummyimage.com/250x120/eee/fff"/>
        <img src="http://dummyimage.com/117x120/ddd/fff"/>
        <img src="http://dummyimage.com/90x120/ccc/fff"/>
        <img src="http://dummyimage.com/250x120/cf0/fff"/>
        <img src="http://dummyimage.com/238x120/dcd/fff"/>
        <img src="http://dummyimage.com/115x120/333/fff"/>
        <img src="http://dummyimage.com/250x120/777/fff"/>
        <img src="http://dummyimage.com/250x120/133/fff"/>
        <img src="http://dummyimage.com/315x120/f00/fff&text=last+element"/>

    </div>

</div>

<div id="test"></div>

</body>
</html>

Answer 1

只是fyi。删除$(document).ready(function() { });，它正常工作是JSbin

好的，我想到了这一点。 IE希望立即运行间隔，并在间隔中使用变量MouseRelXpos，该变量在mousemove被触发之前未设置。结果是变量未定义，因此脚本崩溃。只需将其添加到JS的开头：

   var MouseRelXpos = 0;

这将为变量提供初始值并防止脚本在IE中崩溃。我在jsfiddle测试过，它完美无缺。虽然IE中的性能不是很好，但这是另一个故事。：）

mousemove offset（）不会在IE 7,8中移动DIV

jSfiddle demo

1 个答案: