我正在研究一个简单的滑块,它进展顺利,(仍在学习jQuery)。目前我的滑块计算窗口大小并更改我的(全屏)div宽度,以便内容保留在屏幕中。显然,在滑块上你希望内容移动,这就是问题所在。
我用它来获取窗口宽度,
var lastWidth = $(window).width();
$(window).resize(function(){
if($(window).width()!=lastWidth){
//execute code.
lastWidth = $(window).width();
}
});
所以lastWidth变量存储窗口的宽度。我像这样使用这个变量
这会给出并更新我的slidercontainer中所有div的宽度(#pageslider)
$("#pageslider div").css({"min-width": (lastWidth)});
计算#pageslider的宽度应该是多少,以便所有div都适合。
$("#pageslider").css({"min-width": (lastWidth * 4)});
现在我们遇到了问题。如果访问者点击.portfolio类,则#pageslider会因为左边距而动画到左侧。给出的值是屏幕的当前宽度。这很好用。
但是如果访问者更改了窗口宽度,那么该值不会获得更新,因为它放在CSS中。
$('nav li a.portfolio').click(function(event){
$('#pageslider').animate({
"margin-left":-lastWidth},"slow");
});
因此,如果窗口宽度为1920px并且有人点击.portfolio链接,则#pageslider将向左移动1920。但是当屏幕调整大小时,它会保持在1920px左侧,尽管它应该更改为当前的屏幕尺寸。
这是一个小问题:http://jsfiddle.net/L29pq/
答案 0 :(得分:0)
我所做的是添加一个变量active
,根据lastWidth
的乘数,记录您必须移动的左边多少。点击home
其0
。点击portfolio
1
,依此类推。
<强>的jQuery 强>
var lastWidth = $(window).width();
var active = 0;
$(window).resize(function () {
if ($(window).width() != lastWidth) {
lastWidth = $(window).width();
$("#pageslider div").css({
"min-width": (lastWidth)
});
$("#pageslider").css({
"min-width": (lastWidth * 4)
});
$('#pageslider').css({
"margin-left": -lastWidth * active
});
}
});
$("#pageslider div").css({
"min-width": (lastWidth)
});
$("#pageslider").css({
"min-width": (lastWidth * 4)
});
$('nav li a.portfolio , h1 a').click(function (event) {
event.preventDefault();
var href = this.href;
});
$('nav li a.portfolio').click(function (event) {
$('#pageslider').animate({
"margin-left": -lastWidth
}, "slow");
active = 1;
});
$('h1 a').click(function (event) {
$('#pageslider').animate({
"margin-left": '0px'
}, "slow");
active = 0;
});