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>
没有找到相关结果
已邀请:
1 个回复
黎喊病
$(document).ready(function() { });这将为变量提供一个初始值，并防止脚本在IE中崩溃。我在jsfiddle中测试过，效果很好。 IE的性能虽然不是很好，但这是另一个故事。 :)