animateBackground-plugin
(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(/([-\.]+)(\s|\)|$)/g, "$1px$2");
var res = strg.match(/(-?[-\.]+)(px|\%|em|pt)\s(-?[-\.]+)(px|\%|em|pt)/);
return [parseFloat(res[], ), res[], parseFloat(res[], ), res[]];
}
$.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[], start[]];
var end = toArray(fx.end);
fx.end = [end[], end[]];
fx.unit = [end[], end[]];
fx.bgPosReady = true;
}
var nowPosX = [];
nowPosX[] = ((fx.end[] - fx.start[]) * fx.pos) + fx.start[] + fx.unit[];
nowPosX[] = ((fx.end[] - fx.start[]) * fx.pos) + fx.start[] + fx.unit[];
fx.elem.style.backgroundPosition = nowPosX[] + ' ' + nowPosX[];
};
})(jQuery);
调用示例:
//动画调用示例
$("#viewBody").animate({ backgroundPosition: '(520px 0)' });
animateBackground-plugin的更多相关文章
- Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告
最近在做基于jenkins ant junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...
- [转]NopCommerce How to add a menu item into the administration area from a plugin
本文转自:http://docs.nopcommerce.com/display/nc/How+to+code+my+own+shipping+rate+computation+method Go t ...
- MySQL: Table 'mysql.plugin' doesn't exist的解决
安装解压版MySQL以后,不能启动,日志里面出现了这个错误: MySQL: Table 'mysql.plugin' doesn't exist 这是因为mysql服务启动时候找不到内置数据库&quo ...
- JQuery plugin ---- simplePagination.js API
CSS Themes "light-theme" "dark-theme" "compact-theme" How To Use Step ...
- 学习Maven之Maven Clean Plugin
1.maven-clean-plugin是个什么鬼? maven-clean-plugin这个插件用maven的人都不陌生.我们在执行命令mvn clean时调用的就是这个插件. 这个插件的主要作用就 ...
- MySQL 从 5.5 升级到 5.6,启动时报错 [ERROR] Plugin 'InnoDB' init function returned error
MySQL 从 5.5 升级到 5.6,启动时报错: [ERROR] Plugin 'InnoDB' init function returned error. [ERROR] Plugin 'Inn ...
- No plugin found for prefix 'mybatis-generator' in the current project
http://blog.csdn.net/you23hai45/article/details/50792430 1.错误描述 F:\workspaces\Mybatis>mvn mybatis ...
- 创建Unity3D的MacOS Plugin的正确姿势
http://www.tedlindstrom.se/how-to-link-dylibs-into-unity3d/ I was roaming around the net looking for ...
- Jetty Maven Plugin配置
官方文档:http://www.eclipse.org/jetty/documentation/current/jetty-maven-plugin.html#maven-config-https 1 ...
- Service Plugin / Agent - 每天5分钟玩转 OpenStack(73)
Core Plugin/Agent 负责管理核心实体:net, subnet 和 port.而对于更高级的网络服务,则由 Service Plugin/Agent 管理.Service Plugin ...
随机推荐
- R语言平均值和加权平均值
> a=c(,,) > mean(a) #平均值 [] > wt=c(,,) > weighted.mean(a,wt) #加权平均值 []
- jQuery文档处理
1.wrap 把所有匹配的元素用其他元素的结构化标记包裹起来.(我的理解就是给匹配的元素穿一件衣服) 把所有的段落用一个新创建的div包裹起来 $("p").wrap(" ...
- npm 安装或更新模块失败的解决办法
头一次关注npm,在刚刚安装的机子上使用更新指令却报错,我还以为是SHA512有什么问题,后来发现是因为一些网络原因,所以,如果出现错误,务必修改默认配置为国内镜像,但是在publish之前,记得要改 ...
- 2018 ACM-ICPC 北京网络赛
Problem A 最短路,跑一下dij就可以了. Problem B Problem C 按照题意模拟,不过坑点很多 1.注意字典序: 2.注意挑战的时候失败的那个人要把当前所有桌子上的牌都拿走 P ...
- 最近公共祖先LCA(前置知识)
1.前言 最近公共祖先(Least Common Ancestors),简称LCA,是由Tarjan教授(对,又是他)提出的一种在有根树中,找出某两个结点u和v最近的公共祖先问题. 2.什么是最近公共 ...
- Flask实战第60天:帖子分页技术实现
编辑manage.py,添加测试帖子 @manager.command def create_test_post(): for x in range(1, 100): title = '标题{}'.f ...
- NetCore2.0 RozarPage自动生成增删改查
原文链接:https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/web-api-help-pages-using-swagger 上面的只是原文 ...
- PHP:根据二维数组中的某个字段进行排序
首先了解下以下两个函数: 1.array_column() 返回输入数组中某个单一列的值. 2.array_multisort() 函数返回排序数组.您可以输入一个或多个数组.函数先对第一个数组进行排 ...
- 【20181019T3】比特战争【最小生成树思想】
题面 [错解] Hmm不可做啊 要不按b排个序? 然后并查集瞎搞,刷刷刷过了样例 然后大样例大了几万倍 出了组小数据,Successful Hack 弃疗 水过10分 [正解] 用占领的边将顶点连起来 ...
- bzoj3012(Trie)
bzoj3012 题解 3012: [Usaco2012 Dec]First! Desdescription Bessie has been playing with strings again. S ...