我正在尝试使box
宽度和btn
位置,更改取决于window width
.
Q1。如何删除滚动条后面的空白?(我已经设置了 100% ..)
Q2。我点击btn
2次后回到蓝色的,btn
位置和以前不一样了。如何解决?(我设置了console.log来检查我点击btn
window width
是否会不同,为什么?)
jsFiddle
任何建议将不胜感激,谢谢。
$(function(){
//set column amount
var colamt=0;
var winwid = $(window).width();
function setcolamt(){
winwid = $(window).width();
console.log(winwid);
if(winwid > 300){
if(colamt !== 8){
colamt = 6;
}
}
console.log(colamt);
};
setcolamt();
//set column width
var colwid;
function setcolwid(){
//set column width
colwid = 100 / colamt + "%";
console.log(colwid);
};
setcolwid();
//set img width
function setimgwid(){
$('.box').css({width: colwid});
};
setimgwid();
// ****** button
//set button postion
var boxwid;
function setbtnpos(){
boxwid = $('.box').width();
console.log(boxwid);
$('.colamtminus').css({top: boxwid * 2});
$('.colamtplus').css({top: boxwid * 2});
};
setbtnpos();
//set button visibility when landing
function visbtnchangecolamt(){
if(winwid > 300){
if(colamt == 8){
$('.colamtplus').show();
$('.colamtminus').hide();
}
else{
$('.colamtplus').hide();
$('.colamtminus').show();
}
}
};
visbtnchangecolamt();
//click button update colamt and set button visibility
function setbtnchangecolamt(){
winwid = $(window).width();
$('.colamtplus').click(function(){
if(winwid > 300){
colamt = 6;
}
setcolamt();
setcolwid();
setimgwid();
setbtnpos();
visbtnchangecolamt();
$('.colamtplus').hide();
$('.colamtminus').show();
});
$('.colamtminus').click(function(){
winwid = $(window).width();
if(winwid > 300){
colamt = 8;
}
setcolamt();
setcolwid();
setimgwid();
setbtnpos();
visbtnchangecolamt();
$('.colamtplus').show();
$('.colamtminus').hide();
});
};
setbtnchangecolamt();
});