Jquery调整功能不起作用
我试图建立一个视差滚动网站的左/右移动。除Resize功能外,一切正常。 resize函数似乎在调整整个宽度,而不仅仅是视口当前所在的.item。这会导致一些奇怪的元素移动,随着元素的移动逐渐变得更加糟糕。Jquery调整功能不起作用
这里的JavaScript的:
function scrollToPosition(element) {
if (element !== undefined) {
$(".cont").scrollTo(element, 800, {
margin: true
});
}
}
$(document).ready(function() {
var posts = $('.item');
var position = 0; //Start Position
var next = $('#next');
var prev = $('#prev').hide();
next.click(function(evt) {
//Scroll to next position
prev.show();
scrollToPosition(posts[position += 1]);
if (position === posts.length - 1) {
next.hide();
}
});
prev.click(function(evt) {
//Scroll to prev position
next.show();
scrollToPosition(posts[position -= 1]);
if (position === 0) {
prev.hide();
}
});
$(window).resize(function() {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#cont').css({width: width, height: height});
$('.item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
}
我认为你只需要调整在resizePanel()
后调整滚动:
function resizePanel(currentElement) {
//resize items
scrollToPosition(currentElement);
}
或可能做同样的效果,而不会超时:
function resizePanel(currentElement) {
//resize items
$('.cont').scrollTo(currentElement, 0, {margin: true});
}
并更新resize
调用中的代码返回:
$(window).resize(function(){
resizePanel(posts[position]);
}
感谢您的回复,我不确定我是否理解您的说法,以便进行更改?你介意详细说明 – 2012-07-12 17:41:33
我试过了,但它给出了一个错误,表明该位置没有定义? – 2012-07-12 17:48:50
resizePanel是在您的变量范围之外定义的。把你需要的东西作为一个参数给你。我更新了答案。 – LeGEC 2012-07-12 17:51:43
你用什么浏览器进行测试?不是歌剧? – Rustam 2012-07-12 18:25:24