我使用 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;
}
}
如果有人可以更正我的代码... 提前致谢!
最佳答案
你有语法错误，试试这段代码，{的位置不对，css函数中的:不应该存在.
$(document).ready(function() {
if($(window).width() >= 1023){
$('.background').css("left",-1380).animate({"left":-1080}, 100);
$('#header').css("left",-300).animate({"left":0}, 1200);
}else {
$('.background').css("top",-500).animate({"top":-300}, 100);
$('#header').css("top",-230).animate({"top":0}, 1200);
}
});
编辑 不确定你的 javascript 逻辑应该做什么，但你可以像这样组合它们，
<script>
if(ie < 9){
ieMessage();
}
$(document).ready(function() {
if($(window).width() >= 1023){
$('.background').css("left",-1380).animate({"left":-1080}, 100);
$('#header').css("left":-300).animate({"left":0}, 1200);
{
else {
$('.background').css("top",-500).animate({"top":-300}, 100);
$('#header').css("top":-230).animate({"top":0}, 1200);
}
$('#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>
关于javascript - 如何在jquery代码中集成 "if"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19969086/