0

この Web サイトのスプラッシュ ページを 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 内で私がいじっていたもう 1 つの項目は次のとおりです。

<!--[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 に答える