0

我一直在试图弄清楚如何让这个网站上的启动页面在 IE8 及以下版本中正常工作？现在，它适用于所有其他浏览器（Firefox、Chrome、Safari）。这是网站：

http://gds.parkland.edu/student/fall10/gds220/ashipley/p2/final_revised/index.html

jQuery代码：

/* Sliding Affect Splash Page */
$(function() {
    $('.box').each(function() {
        var $this = $(this);
        $.data(this, 'css', { 
            width: $this.css('width'),
            background: $this.css('background-image') 
        });
    });
});

function restore() {
    $('.box').each(function() {
        var orig = $.data(this, 'css');
        $(this).animate({
            width: orig.width
        },{queue:false});
        $(this).css({backgroundImage: orig.background});
    });
}

/* box 1 */
function boxHover(){
        $('.box').stop().animate({'width' : '596px'},{queue:false});
}

function box1master(){
        $('.box2').css({backgroundImage: 'url(images/splash/zatgun_midtop.jpg)'});
        $('.box3').css({backgroundImage: 'url(images/splash/zatgun_midbottom.jpg)'});
        $('.box4').css({backgroundImage: 'url(images/splash/zatgun_bottom.jpg)'});
}
function box2master(){
        $('.box1').css({backgroundImage: 'url(images/splash/bryan_top.jpg)'});
        $('.box3').css({backgroundImage: 'url(images/splash/bryan_midbottom.jpg)'});
        $('.box4').css({backgroundImage: 'url(images/splash/bryan_bottom.jpg)'});
}
function box3master(){
        $('.box1').css({backgroundImage:'url(images/splash/galleries_top.jpg)'});
        $('.box2').css({backgroundImage: 'url(images/splash/galleries_midtop.jpg)'});
        $('.box4').css({backgroundImage: 'url(images/splash/galleries_bottom.jpg)'});
}
function box4master(){
        $('.box1').css({backgroundImage: 'url(images/splash/contact_top.jpg)'});
        $('.box2').css({backgroundImage: 'url(images/splash/contact_midtop.jpg)'});
        $('.box3').css({backgroundImage: 'url(images/splash/contact_midbottom.jpg)'});
}


$(document).ready(function(){

    $('.box1').hover(function(){
        boxHover();
        box1master();
    }, function(){      
        restore();
    });

    $('.box2').hover(function(){
        boxHover();
        box2master();       
    }, function(){      
        restore();
    });

    $('.box3').hover(function(){
        boxHover();
        box3master();
    }, function(){      
        restore();
    });

    $('.box4').hover(function(){
        boxHover();
        box4master();
    }, function(){      
        restore();
    });

});

我想知道是否可以使用 jQuery 更改每个框之间的间距，或者我是否必须以某种方式在 CSS/HTML 中执行此操作？

我在网站的 HTML 中弄乱的另一个项目是：

<!--[if lt IE 8]>

<style text="text/css">
.box2, .box3, .box4 { margin-top: 132px; }
</style>

<![endif]-->

每当我将边距更改为填充时，它的工作原理就不一样了。到目前为止，每当我将鼠标悬停在它上面时，它的间距都是正确的，但会将右侧的内容推到边缘，而不是显示另一侧的框。

4

2 回答 2

1

当我在 IE8 中加载它时，出现此错误

对象不支持此属性或方法 slide_splash.js，第 81 行字符 1

这是第 81 行

$.preloadImages(['zatgun_midtop.jpg', 'zatgun_midbottom.jpg', 'zatgun_bottom.jpg', 'bryan_top.jpg', 'bryan_midbottom.jpg', 'bryan_bottom.jpg', 'galleries_mtop.jpg', 'galleries_midtop.jpg', 'galleries_bottom.jpg', 'contact_top.jpg', 'contact_midtop.jpg', 'contact_midbottom.jpg']);

这是什么 preloadImages 以及它来自哪里。您从未将其粘贴为代码的一部分。

是从这个吗？

http://plugins.jquery.com/project/preloadImages

如果是这样，我认为您需要下载插件才能使用它。我也在Firefox中得到同样的错误。

$.preloadImages is not a function
[Break On This Error] $.preloadImages(['zatgun_midtop.jpg', ...idtop.jpg', 'contact_midbottom.jpg']);
于 2010-12-28T19:43:54.937 回答
0

谢谢chobo2的回答！这无疑对我帮助很大。

但我发现 div 相互推动的原因是因为位置和边距被读入 IE。

我必须做的是：

<!--[if lt IE 9]>

<style text="text/css">
.box2, .box4{ top: 132px; }
.box3, .box4{ top: 264px; }
.box1, .box3{ position: absolute; }
.box2, .box4{ position: relative; }
a:hover { cursor: pointer; }
</style>

<![endif]-->

您现在可以在此处在任何浏览器中查看结果。

于 2011-01-02T05:38:30.220 回答