如何在javascript中重新计算变量
这是我滚动图像列表的方式。问题在于滚动内容元素的大小是动态的。它会随着窗口大小的改变而改变。在这里如何在javascript中重新计算变量,javascript,jquery,Javascript,Jquery,这是我滚动图像列表的方式。问题在于滚动内容元素的大小是动态的。它会随着窗口大小的改变而改变。在这里 function scrollContent(){ var div = $('#scrolling-content'), ul = $('ul.image'), // unordered list's left margin ulPadding = 0; //Get menu w
function scrollContent(){
var div = $('#scrolling-content'),
ul = $('ul.image'),
// unordered list's left margin
ulPadding = 0;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
}
因此,当用户更改窗口大小时,它必须重新计算左边的值。我该如何更改脚本才能做到这一点?我想用window.resize函数调用scrollContent函数是一个noob解决方案。它会给IE造成冲突。您可以在resize上设置宽度,并让您的函数像这样调用变量。此方法将函数转换为js对象,窗口更新将重置该对象内的宽度变量。当然,现在您可以这样调用函数:scrollContent.scroll
$(window).resize(function() {
$("#scrolling-content").css("width",$(window).width() + "px");
$("#scrolling-content").css("height",($(window).height()-400) + "px");
});
您还可以声明一个标准js变量,并使用它来保持简单。我只是更喜欢使用js对象,以消除可能的var干扰。好的,完成。声明ulWidth var后,您的代码正常工作。非常感谢,非常感谢。
var scrollContent = {
width: 0,
scroll:function(){
var div = $('#scrolling-content'),
ul = $('ul.image'),
// unordered list's left margin
ulPadding = 0;
//Get menu width
scrollContent.width = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var left = (e.pageX - div.offset().left) * (ulWidth-scrollContent.width) / scrollContent.width;
div.scrollLeft(left);
});
}
};
$(window).resize(function() {
$("#scrolling-content").css("width",$(window).width() + "px");
$("#scrolling-content").css("height",($(window).height()-400) + "px");
scrollContent.width = $(window).width();
});