Jquery mousemove offset（）赢得'；不要在IE 7,8中移动DIV_Jquery_Cross Browser_Offset_Mousemove

Jquery mousemove offset（）赢得'；不要在IE 7,8中移动DIV

jquery

Jquery mousemove offset（）赢得'；不要在IE 7,8中移动DIV,jquery,cross-browser,offset,mousemove,Jquery,Cross Browser,Offset,Mousemove,我在这里遇到了一个奇怪的问题：我今天创建了一个mousemove水平画廊该图库在本地、在线、但仅在Safari、Opera、Mozilla和Chrome中运行良好。我甚至不想搬走我的画廊以下是完整的代码示例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmln

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

该图库在本地、在线、但仅在Safari、Opera、Mozilla和Chrome中运行良好。
我甚至不想搬走我的画廊

以下是完整的代码示例：

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


*{填充：0px；边距：0px；}
身体{
字体系列：世纪哥特式；
背景：#000；
字体大小：15px；
颜色：#fff；
}
/*******mm画廊*******/
#MMU容器{
位置：相对位置；
保证金：20px自动；
高度：120px；
宽度：500px；
溢出：隐藏；
}
#嗯画廊{
光标：col resize；
位置：相对位置；
}
#MMG画廊{
位置：相对位置；
浮动：左；
}
#试验{
位置：相对位置；
宽度：500px；
保证金：0自动；
}
$（文档）.ready（函数（）{
//自动设置mmGallery\u容器宽度（）
$（窗口）。加载（函数（）{
sumW=0；
$（'#mmGallery img'）。每个（函数（）{
sumW+=$（this）.width（）；//收集所有图像宽度
$（'#mmGallery'）.width（sumW）；//设置库宽！
});     
//计算“补偿速度”：库容器和库之间的宽度差
wDiff1=$（'#mmGallery_container'）.width（）；
wDiff2=$（'#mmGallery'）.width（）；
wDiff=（wDiff2/wDiff1）-1；/（-1表示已存在的容器宽度）
});
//#
$（“#mmGallery_container”）.mousemove（函数（e）{
mouserexpos=（e.pageX-this.offsetLeft）；//=鼠标位置。此元素的“减”offsetLeft
//##################测试（删除此项）
countCh=$（'#mmGallery'）.children（）.length；
offL=此。offsetLeft；
$（'#test'）.html（
“mmGallery offsetLeft:”+offL+
“
鼠标右键相对位置：”+mouserexpos+“px”+
“
已检索：“+countCh+”div#mmGallery内的儿童。”+
“
mm画廊宽度：”+sumW+“像素宽度（所有图像宽度之和）”+
“
补偿速度：”+wDiff
);
//#######################结束测试
});
var xSlider=$（“#mmGallery”）；//缓存
var-posX=0；
setInterval（函数（）{
posX+=（-mouserexpos-posX）/14；//14=速度（较高的val=较慢的动画）
css（{marginLeft:Math.round（posX*wDiff）+'px'}）；//而不是'marginLeft'使用'left'表示绝对位置。\mmGallery
}，10）；//10=循环超时
});

仅供参考。删除

$（document）.ready（function（）{}）并且它在JSbin中运行良好
好的，我已经弄明白了。IE希望立即运行间隔，并在间隔中使用变量mouserexpos
，该变量在触发mousemove
之前不会设置。结果是变量处于未定义状态，因此脚本崩溃。只需将以下内容添加到JS的开头：
   var MouseRelXpos = 0;  

这将为变量提供一个初始值，并防止脚本在IE中崩溃。我在JSFIDLE中进行了测试，结果非常理想。虽然在IE中的表现并不出色，但那是另一回事
 仅供参考。删除$（document）.ready（function（）{}）并且它在JSbin中运行良好
好的，我已经弄明白了。IE希望立即运行间隔，并在间隔中使用变量mouserexpos
，该变量在触发mousemove
之前不会设置。结果是变量处于未定义状态，因此脚本崩溃。只需将以下内容添加到JS的开头：
   var MouseRelXpos = 0;  

这将为变量提供一个初始值，并防止脚本在IE中崩溃。我在JSFIDLE中进行了测试，结果非常理想。虽然在IE中的表现并不出色，但那是另一回事
 仅供参考：接受+Upvote是25分，不是35分。仅供参考：接受+Upvote是25分，不是35分。很好+1（不知道为什么，但现在在JSFIDLE中也可以工作；）这帮了半个忙！仍然存在无法解释的IE7,8问题（9日未测试）非常感谢！aaaaa rrrrr gh！我不知道我怎么会错过那个！谢谢顺便说一句，我删除了所有document.ready和window.load，并将它们打包到一个window.load中，添加var MouseRelXpos=0现在的性能非常出色！你能把我的那部分评论加在回答上吗？（'因为如果我只是删除document.ready，脚本将无法在本地工作！！！）很好+1（不知道为什么，但现在在JSFIDLE中也可以工作；）这帮了半个忙！仍然存在无法解释的IE7,8问题（9日未测试）非常感谢！aaaaa rrrrr gh！我不知道我怎么会错过那个！谢谢顺便说一句，我删除了所有document.ready和window.load，并将它们打包到一个window.load中，添加var MouseRelXpos=0现在的性能非常出色！你能把我的那部分评论加在回答上吗？（'因为如果我只是删除document.ready，脚本将无法在本地工作！！！）