0

关于如何在浏览器重新调整大小时重新调整包装器和掩码的任何想法？现在它一旦加载就停止面具，所以基本上当我滚动内容时，它会被切断。请参阅此处以获取示例。

$(document).ready(function() {

    $('a').click(function () {

        $('a').removeClass('selected');
        $(this).addClass('selected');

        current = $(this);

        $('#wrapper').scrollTo($(this).attr('href'), 800);      

        return false;
    });

    $(window).resize(function () {
        resizePanel();
    });

});

function resizePanel() {

    width = $(window).width();
    height = $(window).height();

    mask_width = width * $('.item').length;

    $('#debug').html(width  + ' ' + height + ' ' + mask_width);

    $('#wrapper, .item').css({width: width, height: height});
    $('#mask').css({width: mask_width, height: height});
    $('#wrapper').scrollTo($('a.selected').attr('href'), 0);

}
4

3 回答 3

1

这并不真正需要javascript。我会输入一个媒体查询（当您切换到您的移动样式时），将您的#wrapper、#mask 和#item1 设置为：

height: auto !important;
于 2013-06-28T01:36:35.157 回答
0

首先，如果你让 css 将它作为一个固定对象处理，你会为面具省去很多麻烦。如果你这样做，你可以从你的 resize 函数中提取很多代码，并且事情会运行得更快一些。

#mask{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:url(semi-transparent.png);
}

与您的包装物品相同。只需设置宽度 %100 并让 css 完成繁重的工作......

.item {
  width:100%;
}

所以现在你的调整大小功能下降到......

$(window).resize(function () {
  $('#wrapper').css({width: $(window).width(), height: $(window).height()})
    .scrollTo($('a.selected').attr('href'), 0);
});

至于包装器本身，我并不完全清楚问题是什么。如果您可以发布演示或 jsfiddle，我会更新我的答案。

于 2013-06-28T01:39:59.863 回答
0

id='mask'出于某种原因，当我在页面加载时将鼠标悬停在 Firebug 上时，我没有看到任何颜色。只是id='item1'在页面加载时在 Firebug 中改变颜色。当您调整浏览器窗口的大小时，遮罩会显示颜色，并且其 CSS 会被划掉。此外，您在 Firebug 中有大量控制台错误。尽管我们愿意提供帮助，但我们不会为您构建整个网站。请先使用 Firebug 调试您的代码，然后再联系我们。谢谢。

于 2013-06-28T01:56:40.473 回答