Question

我想做的很简单（就像我认为的那样）东西 - 横向画廊。我希望页脚和标题（带菜单）始终粘贴在网站的顶部和底部（即使用户水平滚动页面。我已经使用CSS将我的页眉添加到顶部，使用jQuery将页脚添加到底部 - 它工作正常。

标题CSS：

#header-pane {
    position: fixed;
    top: 20px;
    left: 20px;
}

页脚jQuery：

var footerHeight = 0,
footerTop = 0,
        $footer = $("#footer");
        positionFooter();

function positionFooter() {
    footerHeight = $footer.height();
    footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
    if ( ($(document.body).height()+footerHeight) < $(window).height()) {
            $footer.css({
                position: "absolute",
                top: footerTop
            })
         }
    }
    $(window)
        .scroll(positionFooter)
        .resize(positionFooter)

}）;

对我来说，棘手的部分是在我处理图像布局时开始的。我希望它们填充页眉和页脚之间的自由空间，并根据窗口大小进行缩放。为了放置它们，我用Jquery计算体宽：

    if($("div").hasClass('gallery')){
        $wdt = 0;
        $(".gallery-item").each(function() {
            $wdt += $(this).width();
        });
        $("body").css("width", $wdt);
    }

我把图像放在桌子上：

$(".gallery").wrapInner("<table cellspacing='0'><tr>");
    $(".gallery-item").wrap("<td>");

我的问题是 - 我现在做的一切都好吗？对我来说，似乎必须有一些最简单的方法，我让一切都变得更加困难。问题的第二部分是关于缩放图像。我一直试图用这个库做一些事情：http://imgscale.kjmeath.com/imgscale.jquery.min.js但是它并没有在每个浏览器中运行而且我遇到了很多问题......你会怎么做？

此外，我想问一下新的CSS3盒功能 - 它是否适用于所有浏览器？我可以在一些javascript帮助下使用它吗？我可以在哪里查看CSS3＆amp; HTML5标签支持所有浏览器吗？

垂直适合屏幕的水平图库

0 个答案: