Question

似乎无法解决这个问题。在FF，Chrome等中运行良好。任何人都知道这里出了什么问题？翻转和图像链接不仅不起作用，而且导航栏也搞砸了。通常情况下，我只是会笑，并发布旧的获得一个新的浏览器链接，但不幸的是我没有这个的奢侈。

<!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>

Answer 1

您的变量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);
        }
    );

或者，只需按如下方式绑定悬停：

$(this).hover(evMouseOver, evMouseout);

然后只需逐字移动每个匿名功能块内的代码。

我没有彻底打扰检查，但导航栏看起来像IE7唯一的问题，可能可以修复一些CSS更改。只需将LI元素以固定宽度浮动，给出UL边距：0自动到中心，它应该显示正常。

jQuery动画在IE8中无法正常运行

1 个答案: