jQuery窗口大小调整
问题描述:
$(document).ready(function(){
WinSize = $(window).width();
var currentPosition = 0;
var slideWidth = WinSize;
$(function(){
$(window).resize(function(){
slideWidth = WinSize = $(window).width();
});
});
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#PageBG')
.prepend('<a href="#" class="control" id="previous"><span>Previous</span></a>')
.append('<a href="#" class="control" id="next"><span>Next</span></a>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='next') ? currentPosition+1 : currentPosition-1;
// Hide/show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
},800, 'linear');
});
$('.SlideSelect')
.bind('click', function(){
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-$(this).attr('id'))
},800, 'linear');
});jQuery窗口大小调整
我希望slideWidth根据窗口大小进行更改,因此当窗口大小改变时,slideWidth会发生变化,但我似乎无法使其工作。
有谁知道为什么?
答
它不会更新其他变量,slideWidth
是不同的,不同的变量,在WinSize
值的副本时,它最初设定,你需要这样的事情在你的功能更新两个:
$(function(){
$(window).resize(function(){
slideWidth = WinSize = $(window).width();
});
});
确保slideWidth
在范围内,以便更新相同的slideWidth
变量,而不是创建全局变量。或者,只需使用WinSize
作为代码,不需要2个变量,至少在您的示例中不需要......也许在您的其他代码中需要。
对不起,你能解释一下我不太确定 – Brob 2010-09-23 13:04:20
@Brob - 哪一部分?你最好的选择,除非你需要另一个变量,只是在你的代码中使用'WinSize',*可能*不需要没有更新的额外变量。 – 2010-09-23 13:47:14
代码已更新以显示整个功能 – Brob 2010-10-05 11:03:31