个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 19:02:55 25 4
gpt4 key购买 nike

似乎无法解决这个问题。在 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/

25 4 0
文章推荐： javascript - 如何通过单击 A 标签更改 DIV 上的 CSS 值？
文章推荐： css - 使 div 透明但保持边框可见
文章推荐： jquery - Qtip基础问题
文章推荐： html - 按顺序排列元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com