我使用 jpreloader（http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/）。预加载完成后，我调用标题移动到屏幕，并通过淡入屏幕调用内容。
我的标题是一个固定的 div（作为侧边栏），所以当有人从小屏幕打开我的页面时，我希望在预加载后，它会从顶部到屏幕调用一个相对定位的 div。
在没有声明窗口宽度的情况下，一切都适用于我的代码，但是当我尝试用“if”“手工制作”脚本时，它停止工作。我对javascript一无所知，我试图用一些示例来制作代码，但我无法让它工作......
没有窗口屏幕声明的原始javascript：
<script type="text/javascript">
<!--
//If browser is IE8 or older we show IE specific page
if(ie < 9){
ieMessage();
}
/*
* Call functions when dom is ready
*/
$(document).ready(function() {
$('#header').css("left",-300);
$('.background').css("left",-1380);
$('#content').css("opacity",0);
// Preload the page with jPreLoader
$('body').jpreLoader({
showSplash: true
}, function() {
$('#header').animate({"left":0}, 1200);
$('.background').animate({"left":-1080}, 100);
$('#content').delay(1000).animate({"opacity":1}, 2500);
});
});
-->
</script>
代码不起作用，但我认为它与事实相差不远（我希望）：
<script>
$(document).ready(function() {
// Function to fade in image sprites
$('.sprite').fadeSprite();
// Function to animate when leaving page
$('.transition, #nav a, #logo, #face a').leavePage();
$('#content').css("opacity",0);
if($(window).width() >= 1023){
$('.background').css("left",-1380);
$('#header').css("left",-300);
}else {
$('.background').css("top",-500);
$('#header').css("top",-230);
},
// Preload the page with jPreLoader
$('body').jpreLoader({
showSplash: true
}, function() {
$('#content').delay(1000).animate({"opacity":1}, 2500);
$('#face').animateHome();
$('#face').resizeFace();
if($(window).width() >= 1023){
$('.background').animate({"left":-1080}, 100);
$('#header').animate({"left":0}, 1200);
}else {
$('.background').animate({"top":-300}, 100);
$('#header').animate({"top":0}, 1200);
}
});
});
</script>
我使用以下 css ：
#header {
top:0;
bottom:0;
left:0;
position:fixed;
width:300px;
}
#header .background {
position:fixed;
width:600px;
height:10000px;
left:-1080px;
top:-150px;
-webkit-transform:rotate(9deg);
-moz-transform:rotate(9deg);
-ms-transform:rotate(9deg);
-o-transform:rotate(9deg);
transform:rotate(9deg);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
background: #2e3740;
}
@media only screen
and (max-width: 1023px) {
#header {
position: relative;
display: block;
width:100%;
height: 230px;
}
#header .background {
position:relative;
width: 94%;
height:500px;
margin: 0 auto 0;
left: 0px;
top: -300px;
-webkit-transform:rotate(9deg);
-moz-transform:rotate(9deg);
-ms-transform:rotate(9deg);
-o-transform:rotate(9deg);
transform:rotate(9deg);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
background: #2e3740;
}
}
如果有人可以更正我的代码...在此先感谢！