博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
animateBackground-plugin
阅读量:5736 次
发布时间:2019-06-18

本文共 2761 字,大约阅读时间需要 9 分钟。

(function ($) {            if (!document.defaultView || !document.defaultView.getComputedStyle) {                var oldCurCSS = jQuery.curCSS;                jQuery.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 = $.curCSS(fx.elem, 'backgroundPosition');                    if (!start) {
//FF2 no inline-style fallback 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);

调用示例:

//动画调用示例 $("#viewBody").animate({ backgroundPosition: '(520px 0)' });

 

转载地址:http://phrwx.baihongyu.com/

你可能感兴趣的文章
JPG、PNG和GIF图片的基本原理及优…
查看>>
linux内存条排查
查看>>
解决cacti监控windows网卡带有中文
查看>>
梁念坚:“云计算”福音
查看>>
管理软件的飞跃:像用自来水一样用
查看>>
四块固态硬盘联合刷新PCMark05世界记录
查看>>
浅析信息化时代 医院混合云建设模式
查看>>
Gigamon针对AWS引入全面可视化平台
查看>>
DTCC2015议程曝光 最新嘉宾议题揭秘
查看>>
BAT、IBM、亚马逊、微软等一线互联网的区块链版图布局
查看>>
智能合约:开启一个新经济时代
查看>>
[翻译] JavaScript函数的6个基本术语
查看>>
vue静态资源打包中的坑与解决方案
查看>>
Lc 895. Maximum Frequency Stack 最大频率栈 JS
查看>>
j2ee分布式架构 dubbo + springmvc + mybatis + ehcache + redis 技术介绍
查看>>
Write Your Own Gemspec
查看>>
PlaNet,使用图像输入来学习世界模型
查看>>
Oracle 字符集的查看和修改【下】
查看>>
nginx + keepalive
查看>>
我的友情链接
查看>>