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 ...
随机推荐
- LoadRunner运行中的mmdrv和mdrv
在LoadRunner运行脚本过程中,在任务管理器中我们可以看到有一个或多个名为“mmdrv”的进程在运行,与此同时当我们查看LoadRunner\bin目录下的文件时还会看到一个“mdrv.exe” ...
- nginx安装及配置文件详解
一)nginx安装及模块讲解 1.1.nginx安装步骤 mkdir /soft wget http://nginx.org/download/nginx-1.12.0.tar.gz tar zxf ...
- 一款你不容错过的Laravel后台管理扩展包 —— Voyager
http://laravelacademy.org/post/6401.html Posted on 2016年11月1日 by 学院君 1.简介 Voyager是一个你不容错过的Laravel后 ...
- 设计模式-模板方法模式(the Template Method Pattern)
本文由@呆代待殆原创,转载请注明出处:http://www.cnblogs.com/coffeeSS/ 模板方法模式简介 这是一个被用的相当广泛的一种设计模式,变体也特别多,他建立一个抽象类定义一个算 ...
- 【高斯消元解xor方程组】BZOJ2466-[中山市选2009]树
[题目大意] 给出一棵树,初始状态均为0,每反转一个节点的状态,相邻的节点(父亲或儿子)也会反转,问要使状态均为1,至少操作几次? [思路] 一场大暴雨即将来临,白昼恍如黑夜!happy! 和POJ1 ...
- bzoj 3900: 交换茸角
3900: 交换茸角 Description 动物园里有 n 头麋鹿.每头麋鹿有两支茸角,每支茸角有一个重量.然而,一旦某头麋鹿上 两支茸角的重量之差过大,这头麋鹿就会失去平衡摔倒.为了不然这种悲剧发 ...
- 用flask开发个人博客(26)—— 利用config.py配置文件动态的创建不同的Flask对象
原文:https://blog.csdn.net/hyman_c/article/details/52877704 对配置进行封装的目的是根据不同的使用场景,给flask的app赋予不同的config ...
- java 的环境搭建
java.JDK 的搭建__本人是在360里下载的.也可以去其它的网站. java.jdk官网地址下载: https://download.oracle.com 二.也可以下载地址:http://do ...
- 使用create-react-app时的something is already running on port 3000
问题: 自己今天在使用create-react-app搭建react应用的时候,开启了两个React app,然后npm start的时候,出现something is already running ...
- keytool工具生成自签名证书并且通过浏览器导入证书
1.生成服务器证书库 keytool -genkey -alias tomcat -keypass changeit -keyalg RSA -keysize 1024 -validity 365 - ...