У меня странная проблема с jquery (в основном в Firefox и IE9).Здесь ситуация.У меня есть веб-сайт с горизонтальной прокруткой, в котором в зависимости от вашей позиции прокрутки и раздела содержимого изображение в верхнем правом углу изменяется, чтобы пользователь знал, в каком разделе он находится.Позиции прокрутки для изменения изображения рассчитываются с помощью jquery в зависимости от ширины окна пользователя.У меня есть смягчение меню, поэтому его анимированные переходы от раздела к разделу, а также мои изображения для верхнего правого угла предварительно загружаются в начале и также жестко запрограммированы (http://karpouzaki.com/easing/img/image.png) в моем css, а также на замену изображений, которая происходит с jqueryЭто то, что у меня есть в разделе головы:
<link media="screen" type="text/css" href="css/reset.css" rel="stylesheet">
<link media="screen" type="text/css" href="css/style.css" rel="stylesheet">
<link media="screen" type="text/css" href="fonts.css" rel="stylesheet">
<link href="css/media-queries.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type='text/javascript' src="js/jquery.easing.1.3.js"></script>
<script type='text/javascript' src="js/hscroll.js"></script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
<script type="text/javascript">
$.each(["http://karpouzaki.com/easing/img/naboutus.png","http://karpouzaki.com/easing/img/nwhatwedo.png","http://karpouzaki.com/easing/img/ntheory.png","http://karpouzaki.com/easing/img/nportfolio.png","http://karpouzaki.com/easing/img/nclients.png","http://karpouzaki.com/easing/img/ncontacts.png"],function(i,url){
var img = new Image();
img.src = url;
});
$(window).load(function(){
sitewidths();
scpos();
multibgpos();
$(window).resize(function() {
sitewidths();
scpos();
multibgpos();
})
.resize();//trigger the resize event on page load
});
</script>
Это мои функции, в которых ширина страницы рассчитывается вместе с позициями прокрутки для замены изображения, а также для анимации между разделами контента
$(function() {
$('div.navigation a , div.footleft a' ).bind('click',function(event){
var $anchor = $(this);
/*if you want to use one of the easing effects:
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
*/
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
var scpos = function(){
$(window).scroll(function(){
var wwidth = $(window).width();
var spos1 = wwidth - 355;
var spos2 = spos1+wwidth;
var spos3 = spos2 + wwidth;
var spos4 = spos3 + wwidth + $('.rightporto').width();
var spos5 = spos4 + wwidth + $('.leftclients').width();
if(($(window).scrollLeft() >= 0)&& ($(window).scrollLeft() < spos1)){
$(".step").css('background','url(http://karpouzaki.com/easing/img/naboutus.png) 94% 5% no-repeat fixed');
} else if(($(window).scrollLeft() >= spos1)&& ($(window).scrollLeft() < spos2)){
$(".step").css('background','url(http://karpouzaki.com/easing/img/nwhatwedo.png) 94% 5% no-repeat fixed');
} else if(($(window).scrollLeft() >= spos2 )&& ($(window).scrollLeft() < spos3)){
$(".step").css('background','url(http://karpouzaki.com/easing/img/ntheory.png) 94% 5% no-repeat fixed');
} else if(($(window).scrollLeft() >= spos3)&& ($(window).scrollLeft() < spos4)){
$(".step").css('background','url(http://karpouzaki.com/easing/img/nportfolio.png) 94% 5% no-repeat fixed');
} else if(($(window).scrollLeft() >= spos4)&& ($(window).scrollLeft() < spos5)){
$(".step").css('background','url(http://karpouzaki.com/easing/img/nclients.png) 94% 5% no-repeat fixed');
}else {
$(".step").css('background','url(http://karpouzaki.com/easing/img/ncontacts.png) 94% 5% no-repeat fixed');
}
});
};
var sitewidths = function(){
$(function(){
var dwidth = $(window).width();
var dportowidth = dwidth + $('.rightporto').width();
var dclientwidth = dwidth + $('.rightclients').width();
var cw = $(".rightclients").width();
var bdwidth = (dwidth * 4) + dportowidth + dclientwidth;
var mrportclients = Number(($(window).width() * 0.05));
$('body').css("width" , bdwidth);
$(".multiplebgs .habout").css("width",dwidth);
$(".multiplebgs .hwhatwedo").css("width",dwidth);
$(".multiplebgs .htheory").css("width",dwidth);
$(".multiplebgs .hportfolio").css("width", dportowidth);
$(".multiplebgs .hclients").css("width", dclientwidth);
$(".multiplebgs .hcontacts").css("width",dwidth);
$(".portofolio").css("margin-right" , mrportclients);
$('#content4 .cbox').css('margin-right' , mrportclients);
$(".clients").css("margin-right" , mrportclients);
$('#content5 .cbox').css('margin-right' , mrportclients);
});
};
var multibgpos = function(){
$(function(){
var pwwidth = $(window).width();
var pwheight = $(window).height();
var bg1posx = $('.leftporto').outerWidth() - $('.portofolio').width();
var hawd = ($(window).width() * 0.05);
var wasd = $('.yoxview').css('margin-top').replace('px', '');
var bg1posy = pwheight - $('.footer').height();
var bg2posx = $('.leftporto').outerWidth() - Number(($(window).width()) * 0.05);
var bg2posy = Number(hawd) + Number(wasd);
$('#content4').css('background-position', bg1posx+'px '+'bottom, '+bg2posx+'px '+bg2posy+'px ');
});
};
Сайт включен:
http://karpouzaki.com/easing/
Я изменил window.load на document. уже по-прежнему. Я думал, что это моя анимация нанавигационные ссылки все еще ничего. У меня есть mousescroll для горизонтальной прокрутки, но я не использую прокрутку мыши, когда возникает проблема, поэтому я исключил это. Мне просто кажется, что либо сеанс пользователя истекает, и это заставляет изображения bg бытьперезагрузил еще раз, поэтому исчезают или что-то не так с моими функциями.
У кого-нибудь есть предложения?
Спасибо