gpt4 book ai didi

jquery - 调整大小时更新边距

转载 作者:行者123 更新时间:2023-11-28 12:48:06 25 4
gpt4 key购买 nike

我正在开发一个简单的 slider 并且运行良好(仍在学习 jQuery)。目前,我的 slider 计算窗口大小并更改我的(全屏)div 宽度,以便内容保留在屏幕中。显然,您希望在 slider 上移动内容,这就是问题所在。

我用它来获取我的窗口宽度,

var lastWidth   = $(window).width();
$(window).resize(function(){
if($(window).width()!=lastWidth){
//execute code.
lastWidth = $(window).width();
}
});

所以 lastWidth 变量存储窗口的宽度。我这样使用这个变量

这会给出并更新我的 slidercontainer (#pageslider) 中所有 div 的宽度

$("#pageslider div").css({"min-width": (lastWidth)});

这会计算 #pageslider 的宽度应该是多少,以便所有 div 都适合那里。

$("#pageslider").css({"min-width": (lastWidth * 4)});

现在我们来解决问题。如果访问者点击 .portfolio 类,#pageslider 会因为 margin-left 而向左移动。给出的值是屏幕的当前宽度。这很好用。

但如果访问者更改窗口宽度,则该值不会得到更新,因为它已放入 CSS。

$('nav li a.portfolio').click(function(event){
$('#pageslider').animate({
"margin-left":-lastWidth},"slow");
});

因此,如果窗口宽度为 1920 像素并且有人点击 .portfolio 链接,#pageslider 将向左移动 1920。但是,当调整屏幕大小时,它会保持在左侧 1920 像素处,尽管它应该更改为当前屏幕尺寸。

这是一个有问题的小 jsfiddle:http://jsfiddle.net/L29pq/

最佳答案

DEMO

我所做的是添加一个变量 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;
});

关于jquery - 调整大小时更新边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17232075/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com