似乎无法解决这个问题。在 FF、Chrome 等中运行良好。有人知道这里出了什么问题吗？不仅翻转和图像链接不起作用，而且导航栏也变得一团糟。通常我会笑着发布旧的获取新浏览器链接，但不幸的是我没有这个奢侈。
http://daveywhitney.com/moons/
<!DOCTYPE html>
<html>
<head>
<title>MOON</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
/* Preloading, if you are into that */
(function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)
jQuery.preLoadImages(
'img/moons/a0.png',
'img/moons/a1.png',
'img/moons/a2.png',
'img/moons/a3.png',
'img/moons/a4.png',
'img/moons/a5.png',
'img/moons/a6.png',
'img/moons/p0.png',
'img/moons/p1.png',
'img/moons/p2.png',
'img/moons/p3.png',
'img/moons/p4.png',
'img/moons/p5.png',
'img/moons/p6.png'
);
/* hover actions for link-binding */
function evMouseOver(i) {
console.log(i);
$('#moon img').eq(i).attr('src','img/moons/a' + i + '.png');
$('ul#nav li').eq(i).addClass('hover');
}
function evMouseOut(i) {
$('#moon img').eq(i).attr('src','img/moons/p' + i + '.png');
$('ul#nav li').eq(i).removeClass('hover');
}
/* If the image sizes are not specified, this must be called at $(window).load() */
$().ready(function() {
$('#nav').fadeIn(2000);
var original_pos = [];
var parent_width = $('#moon').width();
var parent_pos = $('#moon').offset();
/* set lists to respond to each other's hover events */
$('.hoverbind').children().each(function(i) {
i = $(this).index();
$(this).hover(
function() {
evMouseOver(i);
},
function() {
evMouseOut(i);
}
);
/* enable remote clicking for IMGs and LIs (HREF used will be the one in the UL) */
$(this).click(
function() {
parent.location = $('ul#nav li').eq(i).children('a').attr('href');
}
);
});
$('#moon img').each(function() {
el = $(this);
/* keep default positions of children */
original_pos = el.offset();
/* move everybody to the middle: Lc=Lp+(Wp-Wc)/2 */
el.offset({
'left' : parent_pos.left + (parent_width - this.width)/2,
'top' : original_pos.top
});
/* fade in */
el.animate(
{
'opacity' : 1
}
);
/* bring everybody back where they started */
el.animate(
{
'left' : 0, // (original_pos.left - parent_pos.left) - (original_pos.left - parent_pos.left), // Which of course = 0... WTF? Does this make sense???
'top' : 0 //(original_pos.top - parent_pos.top)
},
{
'duration' : 6000,
'complete' : function() {}
}
);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="logo">
<img src="img/logo.png" alt="Full Moon Creative" width="700" height="136" />
</div>
<div id="moon" class="hoverbind">
<img src="img/moons/p0.png" alt="" width="77" height="455" />
<img src="img/moons/p1.png" alt="" width="104" height="455" />
<img src="img/moons/p2.png" alt="" width="167" height="455" />
<img src="img/moons/p3.png" alt="" width="321" height="455" style="z-index: 3;" />
<img src="img/moons/p4.png" alt="" width="164" height="455" />
<img src="img/moons/p5.png" alt="" width="113" height="455" />
<img src="img/moons/p6.png" alt="" width="69" height="455" />
</div>
<!-- Changing the HREFs on this link list will change the links on corresponding images - by index, so watch order -->
<ul id="nav" class="hoverbind">
<li><a href="#contact">Contact Us</a></li>
<li><a href="#gal">Gallery</a></li>
<li><a href="#prods">Production Services</a></li>
<li><a href="#home">Home</a></li>
<li><a href="#mktng">Marketing Services</a></li>
<li><a href="#clist">Client List</a></li>
<li><a href="#clogin">Client Login</a></li>
</ul>
</div>
</body>
</html>
最佳答案
您的变量 i 超出了 IE 的范围。只需在悬停函数中使用 $(this).index() 即可。
$('.hoverbind').children().each(function(i) {
//i = $(this).index();
$(this).hover(
function () {
$(this).attr('src', 'img/moons/a' + $(this).index() + '.png');
$('ul#nav li').eq($(this).index()).addClass('hover');
//evMouseOver(i);
},
function() {
$(this).attr('src', 'img/moons/p' + $(this).index() + '.png');
$('ul#nav li').eq($(this).index()).removeClass('hover');
//evMouseOut(i);
}
);
或者，只需按如下方式绑定(bind)悬停:
$(this).hover(evMouseOver, evMouseout);
然后将每个匿名函数 block 中的当前代码逐字移动到那里。
我没有费心去彻底检查，但导航栏看起来像是 IE7 独有的问题，可能可以通过一些 CSS 更改来修复。只需将 LI 元素以固定宽度 float ，将 UL margin: 0 auto 设置为居中，它应该可以正常显示。
关于jQuery 动画在 IE8 中无法正常运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4915159/