У меня есть следующий веб-сайт wixwebsite.seobrasov.com, где у меня есть сценарий Jquery, который анимирует страницы, чтобы вставлять их и выдвигаться. У меня есть формула для вычисления позиционирования центра в зависимости от окна браузера:
left: Math.max(0,(($(window).width() - 980)/2))
где 980 - моя ширина div.
Однако при изменении размера окна div остаются в старой позиции и только перестраиваются при обновлении.
То, что я пытаюсь сделать, - это переориентировать активную страницу на изменение размера окна. Я уже пытался включить функцию в документ, готовый с изменением размера окна, но это не работает. Вот мой код скрипта:
function animate() {
var currentPageI = -1;
var pages = [
$('div.dhome'),
$('div.dabout'),
$('div.dcontact'),
$('div.dportraits'),
$('div.dpregnancy'),
$('div.dbabies-newborn'),
$('div.dbabies-3-6'),
$('div.dbabies-6-24'),
$('div.dkids'),
$('div.dfamily'),
$('div.dall-about-me'),
$('div.dcouples'),
$('div.dpets'),
$('div.dthe-experience'),
$('div.dfinishing-touches'),
$('div.dthank-you'),
];
var viewsWidth = 1300;
var showPage = function(index){
if(index === currentPageI){return;}
var currentPage = pages[currentPageI];
if(currentPage){
currentPage.stop().animate({left: -viewsWidth})
}
var nextPage = pages[index];
nextPage
.stop()
.css({left: viewsWidth + Math.max(0,(($(window).width() - 980)/2))})
.animate({left: Math.max(0,(($(window).width() - 980)/2))})
currentPageI = index;
}
// show default page
showPage(0);
$('a.dhome').click(showPage.bind(null, 0));
$('a.dabout').click(showPage.bind(null, 1));
$('a.dcontact').click(showPage.bind(null, 2));
$('a.dportraits').click(showPage.bind(null, 3));
$('a.dpregnancy').click(showPage.bind(null, 4));
$('a.dbabies-newborn').click(showPage.bind(null, 5));
$('a.dbabies-3-6').click(showPage.bind(null, 6));
$('a.dbabies-6-24').click(showPage.bind(null, 7));
$('a.dkids').click(showPage.bind(null, 8));
$('a.dfamily').click(showPage.bind(null, 9));
$('a.dall-about-me').click(showPage.bind(null, 10));
$('a.dcouples').click(showPage.bind(null, 11));
$('a.dpets').click(showPage.bind(null, 12));
$('a.dthe-experience').click(showPage.bind(null, 13));
$('a.dfinishing-touches').click(showPage.bind(null, 14));
$('.submit').click(showPage.bind(null, 15));
$('a.dthank-you').click(showPage.bind(null, 16));
$('.content-wrap').mouseover(function(){
$('.slider').stop().animate({
right: 0
}, 50000);
}).mouseout(function(){
$('.slider').stop().animate({
right: '-1300px'
}, 50000);
});
};
$(document).ready(function () {
animate();
});
$(window).resize(function(){
animate();
});
Я даже пытался добавить CSS оставил строку стиля внутри функции с window.resize
и на currentPage
, но он по- прежнему не работает. Как будто window.resize
ничего не делает.
Спасибо!
Поэтому мне удалось исправить это. После a.showPage
я включил функцию центра: $(window).resize(function(){center()});
который работает следующим образом, и теперь он настраивается на изменение размера браузера:
var center = function(index){
if(index === currentPageI){return;}
var currPage = pages[currentPageI];
if(currPage){
currPage
.stop()
.css({left: viewsWidth + Math.max(0,(($(window).width() - 980)/2))})
.animate({left: Math.max(0,(($(window).width() - 980)/2))})
}
var nextPage2 = pages[index];
nextPage2
.stop()
.css({left: viewsWidth + Math.max(0,(($(window).width() - 980)/2))})
.animate({left: Math.max(0,(($(window).width() - 980)/2))})
currentPageI = index;
};
Вы можете определить событие изменения размера браузера с .resize()
функции jQuery .resize()
.
Поэтому вам нужно будет делать математику каждый раз, когда вызывается событие.
$(window).resize(function() {
redrawDiv();
});
function redrawDiv() {
// do your math here
}
Другое решение:
измените css вашей ширины div-содержимого на 980px
, у вас уже есть margin:0 auto
;
и в скрипте вам нужно только установить current page
left:0
вместо вашего математического материала.