1

项目链接

登录详情如下：

代码：AAAAAA 名称：测试

当您在 iPad 或 iPad mini 上访问该网站并登录后，您将被引导至欢迎页面。在那个页面上，一些气球会从顶部到达，它们会进入树中。问题是：

  • 如果以纵向模式登录并转动设备，则气球不会在横向模式下正确放置，反之亦然。

该动画的js是：

for (i = 1; i <= 7; i++) {
$('.trans' + i).toggleClass('toggle1');
};

setTimeout(function () {
    $('.posRel').fadeTo('slow', 2, function () {
        $('.toggle1').toggleClass('fSmall1');
    });
}, 2000);

这些气球的CSS是：

.trans1 { position:absolute; top:-50px; left:0%; width:23px; height:63px; background-color:#00F; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; transition:all 2s ease; background:url(../images/fruit-small.png) left top no-repeat; z-index:10; }

.trans2 { position:absolute; top:-200px; left:25%; width:23px; height:63px; background-color:#00F; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; transition:all 2s ease; background:url(../images/fruit-small.png) left top no-repeat; z-index:10; }

.trans3 { position:absolute; top:-300px; left:35%; width:23px; height:63px; background-color:#00F; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; transition:all 2s ease; background:url(../images/fruit-small.png) left top no-repeat; z-index:10; } 

.trans4 { position:absolute; top:-160px; left:45%; width:23px; height:63px; background-color:#00F; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; transition:all 2s ease; background:url(../images/fruit-small.png) left top no-repeat; z-index:10; } 

.trans5 { position:absolute; top:-160px; right:5%; width:23px; height:63px; background-color:#00F; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; transition:all 2s ease; background:url(../images/fruit-small.png) left top no-repeat; z-index:10; } 

.trans6 { position:absolute; top:-160px; left:245%; width:23px; height:63px; background-color:#00F; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; transition:all 2s ease; background:url(../images/fruit-small.png) left top no-repeat; z-index:10; } 

.trans7 { position:absolute; top:-160px; right:0%; width:23px; height:63px; background-color:#00F; -moz-transition:all 2s ease; -webkit-transition:all 2s ease; transition:all 2s ease; background:url(../images/fruit-small.png) left top no-repeat; z-index:10; } 

.trans1.toggle {    left:578px;    margin-left:-50px;    top:400px; }

.trans2.toggle {    left:528px;    margin-left:-50px;    top:400px; }

.trans3.toggle {    left:418px;    margin-left:-50px;    top:460px; }

.trans4.toggle {    left:518px;    margin-left:-50px;    top:330px; }

.trans5.toggle {    left:450px;    margin-left:-50px;    top:350px; }

.trans6.toggle {    left:588px;    margin-left:-50px;    top:340px; }

.trans7.toggle {    left:468px;    margin-left:-50px;    top:350px; }

然后，我应用了 switch case 来获取窗口方向的变化：

switch ( window.orientation ) {
    case 0:
        //alert('portrait mode');
        var wHeight = $(window).height();
        var newHeight = wHeight-110;
        //alert(newHeight);
        $(".sitewid.pad25.p2height").css('min-height',newHeight);
        $("#footer").toggleClass(".footer1");
        $(".footer1").css("bottom","00px !important");
        $(window).bind("load", function() {for (i = 1; i <= 7; i++) {$('.trans' + i).toggleClass('toggle1');}; setTimeout(function () { $('.posRel').fadeTo('slow', 2, function () {$('.toggle1').toggleClass('fSmall1');}); }, 2000);
});
    break;

    case 90:
        //alert('landscape mode screen turned to the left');
        var wHeight = $(window).height();
        var newHeight = wHeight-110;
        //alert(newHeight);
        $(".sitewid.pad25.p2height").css('min-height',newHeight);
        $("#footer").toggleClass(".footer1");
        $(".footer1").css("bottom","00px !important")
        $(window).bind("load", function() {for (i = 1; i <= 7; i++) {$('.trans' + i).toggleClass('toggle');};setTimeout(function () { $('.posRel').fadeTo('slow', 2, function () {$('.toggle').toggleClass('fSmall1');}); }, 2000);
});
    break;

    case -90:
        //alert('landscape mode screen turned to the right');
        var wHeight = $(window).height();
        var newHeight = wHeight-110;
        //alert(newHeight);
        $(".sitewid.pad25.p2height").css('min-height',newHeight);
        $("#footer").toggleClass(".footer1");
        $(".footer1").css("bottom","00px !important")
        $(window).bind("load", function() {for (i = 1; i <= 7; i++) {$('.trans' + i).toggleClass('toggle');};setTimeout(function () { $('.posRel').fadeTo('slow', 2, function () {$('.toggle').toggleClass('fSmall1');}); }, 2000);
});
    break;

}   


}, false);

你能告诉我我做错了什么或者我需要做什么，以便当窗口方向改变时，气球被正确放置。树、草和其他所有元素都正确放置，但是当方向发生变化时，气球并没有到达原来的位置。感谢您查看这个。

4

0 回答 0