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);
  • 相关阅读:
    javac 小记
    安全专家的工具箱
    MyBatis 缓存机制(十三)
    SpringMVC 环境搭建
    MyBatis 模糊查询的 4 种实现方式
    MyBatis 项目开发中是基于 XML 还是注解?
    MyBatis 动态 SQL 语句中出现 '<' 的问题
    数据库设计的三大范式
    mybatis 同时使用 XML 和注解
    数据库事务
  • 原文地址:https://www.cnblogs.com/jmjweb/p/3412616.html
Copyright © 2011-2022 走看看