Блог

Главная - Вопросы по программированию - mousemove offset () не перемещает DIV в IE 7,8

mousemove offset () не перемещает DIV в IE 7,8

#jquery #cross-browser #offset #mousemove

#jquery #кроссбраузерный #смещение #перемещение мыши

Вопрос:

Здесь я столкнулся со странной проблемой:
сегодня я создал горизонтальную галерею 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/fffamp;text=last element"/>

    </div>

</div>

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

</body>
</html>

Комментарии:

1. К вашему СВЕДЕНИЮ: Принять проголосовать за — это 25 баллов, а не 35.

Ответ №1:

просто к вашему сведению. Удалите $(document).ready(function() { }); , и он отлично работает, это JSBin

Хорошо, я с этим разобрался. IE хочет запустить интервал сразу, и в интервале вы используете переменную, MouseRelXpos которая не устанавливается до mousemove запуска. Результатом является то, что переменная не определена, поэтому скрипт завершает работу. Просто добавьте это в начало вашего JS: 

    var MouseRelXpos = 0;

Это присвоит переменной начальное значение и предотвратит сбой скрипта в IE. Я тестировал в jsfiddle, и это работает идеально. Хотя производительность в IE невелика, но это уже другая история. 🙂

Комментарии:

1. ПРИЯТНО! 1 (не знаю почему, но теперь работает и в JSfiddle 😉 это половина помощи! Все еще существует необъяснимая проблема с IE7, 8 (не тестировалась на 9) БОЛЬШОЕ ВАМ СПАСИБО!

2. ААААААРРРРРГХ! Я не знаю, как я это пропустил! Спасибо! Кстати, я удалил все document.ready и window.load и объединил все вместе в window. загружаем добавление var MouseRelXpos = 0; , и теперь производительность великолепна!

3. можете ли вы добавить мою часть комментария к ответу? (Потому что, если я просто удалю document.ready, скрипт не будет работать локально !!! )