zoukankan      html  css  js  c++  java
  • backgroundPositionY 兼容firefox方法

    在firefox下jquery的css方法不支持backgroundPositionY属性, 
    我们可以通过如下方法解决。 

    在使用backgroundPositionY之前调用

    https://raw.github.com/brandonaaron/jquery-cssHooks/master/bgpos.js 

    github项目来自:

    https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js 

    https://github.com/louisremi/jquery.backgroundXY.js/blob/master/jquery.backgroundXY.js 

    (function($) {
        // backgroundPosition[X,Y] get hooks
        var $div = $('<div style="background-position: 3px 5px">');
        $.support.backgroundPosition   = $div.css('backgroundPosition')  === "3px 5px" ? true : false;
        $.support.backgroundPositionXY = $div.css('backgroundPositionX') === "3px" ? true : false;
        $div = null;
    
        var xy = ["X","Y"];
    
        // helper function to parse out the X and Y values from backgroundPosition
        function parseBgPos(bgPos) {
            var parts  = bgPos.split(/s/),
                values = {
                    "X": parts[0],
                    "Y": parts[1]
                };
            return values;
        }
    
        if (!$.support.backgroundPosition && $.support.backgroundPositionXY) {
            $.cssHooks.backgroundPosition = {
                get: function( elem, computed, extra ) {
                    return $.map(xy, function( l, i ) {
                        return $.css(elem, "backgroundPosition" + l);
                    }).join(" ");
                },
                set: function( elem, value ) {
                    $.each(xy, function( i, l ) {
                        var values = parseBgPos(value);
                        elem.style[ "backgroundPosition" + l ] = values[ l ];
                    });
                }
            };
        }
    
        if ($.support.backgroundPosition && !$.support.backgroundPositionXY) {
            $.each(xy, function( i, l ) {
                $.cssHooks[ "backgroundPosition" + l ] = {
                    get: function( elem, computed, extra ) {
                        var values = parseBgPos( $.css(elem, "backgroundPosition") );
                        return values[ l ];
                    },
                    set: function( elem, value ) {
                        var values = parseBgPos( $.css(elem, "backgroundPosition") ),
                            isX = l === "X";
                        elem.style.backgroundPosition = (isX ? value : values[ "X" ]) + " " + 
                                                        (isX ? values[ "Y" ] : value);
                    }
                };
                $.fx.step[ "backgroundPosition" + l ] = function( fx ) {
                    $.cssHooks[ "backgroundPosition" + l ].set( fx.elem, fx.now + fx.unit );
                };
            });
        }
    })(jQuery);
  • 相关阅读:
    SEO搜索引擎
    SEO
    编程的智慧
    ES6编程规范
    面试题集
    motto
    motto
    JS
    motto
    Linux
  • 原文地址:https://www.cnblogs.com/jmjweb/p/3412616.html
Copyright © 2011-2022 走看看