mousemove offset() не будет перемещать DIV в IE 7,8
Я столкнулся со странной проблемой здесь:
Я создал сегодня горизонтальную галерею мыши.
Галерея работает ОТЛИЧНО на месте, в Интернете, но только в: Safari, Opera, Mozilla, Chrome.
IE даже не подумает переместить мою галерею.
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>
1 ответ
Просто к вашему сведению Удалить $(document).ready(function() { });
и работает нормально это JSbin
Хорошо, я понял это. IE хочет запустить интервал сразу, а в интервале вы используете переменную MouseRelXpos
который не установлен до mousemove
срабатывает. В результате переменная не определена, поэтому скрипт вылетает. Просто добавьте это в начало вашего JS:
var MouseRelXpos = 0;
Это даст переменной начальное значение и предотвратит сбой скрипта в IE. Я проверил в jsfiddle, и он отлично работает. Производительность в IE невелика, но это уже другая история.:)