Question

我想将慢速滚动应用于背景图像 - 类似于视差但很简单。所以我有背景（screen.css）：

body { background: url('bcg.jpg') center top no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; }

...和jQuery（jquery.init.js）：

 $(document).ready(function(){
    var bgheight = '100%';
    if($('body').height() >= $(window).height()){
        var bgheight = $('body').height() - $(window).height();
    }
    $('body').css('background-size',bgheight+'px auto');
    $(window).scroll(function(){
        var bgpos = -(Math.max($('#pagewrap').scrollTop(),$('body').scrollTop())/10)+"px";
        $('body').css('background-position','50% '+bgpos);
    });
});

...和HTML：

<!doctype html>
<html class="no-js" lang="cs">
    <head>
        <title>...</title>
        <link rel="stylesheet" href="/screen.css" />
        <script src="/respond.min.js"></script>
        <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
            <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
        <![endif]-->
        <script src="/jquery.min.js"></script>
        <script src="/jquery.init.js"></script>
    </head>
    <body>
        <div id="pagewrap">
            <!-- content -->
        </div>
    </body>
</html>

我很惊讶它只适用于Chrome和IE 5.你有其他浏览器的提示吗？

用jQuery慢速背景图像滚动

0 个答案: