javascript - 视差/背景位置的特征检测

Question

好的，所以我已经创建了自己的视差 jQuery/JS 脚本，但我只是不知道如何定位支持以下内容(需要以下内容)的浏览器:

• 支持背景位置的转换

我正在尝试的站点(预览)是: My Test Site

我如何检测浏览器是否支持这个？ 我可以根据窗口宽度运行媒体查询吗？ 我必须浏览器嗅探吗？ 我在 WWW 上看不到任何东西可以给我关于如何对此进行特征检测的线索。

如有任何帮助，我们将不胜感激。

我的JS代码在这里:(喜欢的可以随意使用)

var goTop = 0;
var thisGoTop = 0;
var thisHeight = 0;
var thisWinH = 0;
var bottomIntrusion = 0;
var thisMax = 0;
var bgPos = 0;

function parallax(){

    goTop = $(window).scrollTop();
    thisWinH = $(window).height();

    $('div.para').each(function(){

        thisGoTop = $(this).offset().top;
        thisHeight = $(this).height();
        thisMax = Math.floor(thisHeight * 0.3);
        bottomIntrusion = (thisGoTop + (thisHeight / 2) - goTop) / thisWinH;

        if (bottomIntrusion > 0) {
            bgPos = 0 - (Math.floor(thisMax * bottomIntrusion));
            $(this).css('background-position','center ' + bgPos + 'px');
        }

    });

}

parallax();

$(window).scroll(function(){

    parallax();

});

编辑: 我查看了 Modernizr 库，但没有找到任何给我关于 CSS3 背景位置转换支持的线索。在这一点上，我离浏览器嗅探越来越近了，我不想去那里。

Answer 1

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $( document ).ready( function() {
            var Compatibility = function()
            {
                var context = this;

                context.TestObject = function( id )
                {
                    function CreateObject( id )
                    {
                        $('body').prepend('<div id="CompatibilityTestObject_' + id + '"></div>');
                    }

                    // Constructor
                    CreateObject( id );

                    return {
                        GetObject: function( id )
                        {
                            try
                            {
                                // Fetch with raw Javascript so if the javascript method does not exist it will throw an error
                                var fetchedDomElement = document.getElementById( "CompatibilityTestObject_" + id );
                                return fetchedDomElement;
                            }
                            catch( e )
                            {
                                // Failed to fetch DOM Element
                                return false;
                            }
                        },
                        DeleteObject: function( id )
                        {
                            try
                            {
                                $( "#CompatibilityTestObject_" + id ).remove();
                                return true;
                            }
                            catch( e )
                            {
                                // Failed to remove object
                                return false;
                            }
                        }
                    }
                }

                context.Factory = function()
                {
                    return {
                        CreateTestObject: function( id )
                        {
                            var m_TestObject = new context.TestObject( id );
                            return m_TestObject.GetObject( id );
                        },
                        DeleteTestObject: function( id )
                        {
                            return context.DeleteObject( id );
                        }
                    }
                }();

                var CSS = function()
                {
                    return {
                        BackgroundPosition: function()
                        {
                            var testObject = context.Factory.CreateTestObject( "BackgroundPosition" );

                            try
                            {
                                // My first try at testing for background positioning
                                testObject.style.backgroundPosition = "center";
                                return true;
                            }
                            catch( e )
                            {
                                // Implement the handling of this error
                                //alert( "Does not support backgroundPosition: " + e.message );
                                return false;
                            }                                                              
                        }
                    }
                }();

                return {
                    CheckCSS: CSS
                }
            }();
        } );
    </script>

复制上面的脚本...将它放在你的代码中，然后像这样调用它:

if( Compatibility.CheckCSS.BackgroundPostion() )
{
   // Compatible browser
}
else 
{
   // Not compatible
}