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

如何解决mousemove offset不会在IE 7,8中移动DIV

| 我在这里遇到了一个奇怪的问题：我今天创建了一个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>

解决方法

只是删除$(document).ready(function() { });，可以正常工作了JSbin 好的，我知道了。 IE希望立即运行间隔，并在间隔中使用变量“ 2”，直到触发“ 3”后才设置该变量。结果是该变量处于未定义状态，因此脚本崩溃。只需将其添加到JS的开头即可：

   var MouseRelXpos = 0;

这将为变量提供一个初始值，并防止脚本在IE中崩溃。我在jsfiddle中测试过，效果很好。 IE的性能虽然不是很好，但这是另一个故事。 :)

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

如何解决mousemove offset不会在IE 7,8中移动DIV

解决方法

相关推荐