码迷,mamicode.com
首页 > Web开发 > 详细

jquery背景动画插件使用

时间:2014-08-27 15:59:58      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   os   使用   io   for   ar   art   

在网页制作动画特效的时候,有时候想通过背景插入图片,然后通过控制背景显示的位置来实现一些动画效果,这样就不用使用绝对定位控制left和top来实现动画效果!但是jquery本身的动画函数是不支持背景动画的!这里就介绍通过一个动画插件来实现背景动画的效果!

代码如下!(jqBackgroundPositionAnimate.js)

/* Revision for the advanced version of jQuery.  weibo.com/61557518  */
(function($) {
    if (!document.defaultView || !document.defaultView.getComputedStyle) {
        var oldCurCSS = $.curCSS;
        $.curCSS = function(elem, name, force) {
            if (name === ‘background-position‘) {
                name = ‘backgroundPosition‘;
            }
            if (name !== ‘backgroundPosition‘ || !elem.currentStyle || elem.currentStyle[name]) {
                return oldCurCSS.apply(this, arguments);
            }
            var style = elem.style;
            if (!force && style && style[name]) {
                return style[name];
            }
            return oldCurCSS(elem, ‘backgroundPositionX‘, force) + ‘ ‘ + oldCurCSS(elem, ‘backgroundPositionY‘, force);
        };
    }
    var oldAnim = $.fn.animate;
    $.fn.animate = function(prop) {
        if (‘background-position‘ in prop) {
            prop.backgroundPosition = prop[‘background-position‘];
            delete prop[‘background-position‘];
        }
        if (‘backgroundPosition‘ in prop) {
            prop.backgroundPosition = ‘(‘ + prop.backgroundPosition;
        }
        return oldAnim.apply(this, arguments);
    };

    function toArray(strg) {
        strg = strg.replace(/left|top/g, ‘0px‘);
        strg = strg.replace(/right|bottom/g, ‘100%‘);
        strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
        var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
        return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];
    }
    $.fx.step.backgroundPosition = function(fx) {
        if (!fx.bgPosReady) {
            var start = $.css(fx.elem, ‘backgroundPosition‘);
            if (!start) {
                start = ‘0px 0px‘;
            }
            start = toArray(start);
            fx.start = [start[0], start[2]];
            var end = toArray(fx.end);
            fx.end = [end[0], end[2]];
            fx.unit = [end[1], end[3]];
            fx.bgPosReady = true;
        }
        var nowPosX = [];
        nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
        nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
        fx.elem.style.backgroundPosition = nowPosX[0] + ‘ ‘ + nowPosX[1];
    };
})(jQuery);

上面的代码是jquery的扩展,所以使用前先引入jquery!

使用方法如下:

$("#select").animate({backgroundPosition: ‘(0 0)‘}, {duration:300,complete: function(){
/*
动画结束执行的脚本
*/
}
);
$("#select").animate({backgroundPosition: ‘(left -873px)‘}, {duration:300})
//duration 速度(单位毫秒)

这个插件兼容性还是可以的,支持IE6,和其他主流的浏览器,效果还是不错的!关键是省去了很多写结构的时间,直接用背景定位来代替!

jquery背景动画插件使用

标签:style   blog   color   os   使用   io   for   ar   art   

原文地址:http://www.cnblogs.com/shizhouyu/p/3939381.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!