Question

好的，所以我创建了自己的parallaxing 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
}

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

1 个答案: