1

我在这里遇到了一个奇怪的问题：
我今天创建了一个 mousemove 水平画廊。

该画廊可以在本地、在线完美运行，但仅限于：Safari、Opera、Mozilla、Chrome。
IE 甚至不会考虑移动我的画廊。

jSfiddle 演示

这是完整的代码示例：

<!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>
4

1 回答 1

1

仅供参考。删除$(document).ready(function() { });它，它工作正常是 JSbin

好的，我想通了。IE 想要立即运行区间，并且在区间内使用MouseRelXpos直到mousemove被触发才设置的变量。结果是变量未定义，因此脚本崩溃。只需将其添加到 JS 的开头： 

   var MouseRelXpos = 0;

这会给变量一个初始值并防止脚本在 IE 中崩溃。我在 jsfiddle 中进行了测试，效果很好。虽然 IE 中的性能不是很好，但那是另一回事了。:)

于 2011-05-28T00:14:39.320 回答