jQuery的animate在火狐浏览器上不支持backgroundPositionX的解决方法
在网上找的ffSupp.js文件
/**
* 自定义backgroundPosition的animate,支持火狐,jQuery1.8以上版本
* @author Meleong
* v1.00
*/
(function($) {
$.fx.step["backgroundPosition"] = function(fx) {
if (typeof fx.end == 'string') {
fx.start = getBgPos(fx.elem);
//fx.end原本是一个string,这里将它转换成数组,就不会再进入这个if,也方便我们下面的计算
//例 "0px -21px"
fx.end = [parseFloat(fx.end.split(" ")[0]), parseFloat(fx.end.split(" ")[1])];
}
//这里fx.pos是根据传入的时间参数,从0到1变化的浮点数
var nowPosX = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit;
var nowPosY = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit;
fx.elem.style.backgroundPosition = nowPosX + ' ' + nowPosY; /**
* 获取backgroundPosition数组[top, left],没有单位
*/
function getBgPos(elem) {
var top = 0.0;
var left = 0.0;
if ($(elem).css("backgroundPosition")) {
//例 "0px -21px"
top = parseFloat($(elem).css("backgroundPosition").split(" ")[0]);
left = parseFloat($(elem).css("backgroundPosition").split(" ")[1]);
}else{
top = parseFloat($(elem).css("backgroundPositionX"));
left = parseFloat($(elem).css("backgroundPositionY"));
}
return [top, left];
}
}
})(jQuery);
在animate.html中这样写(部分代码)
<body>
<script src="jquery-1.11.3.js"></script>
<script language="javascript">
for(var j0=0;j0<5;j0++){
var juli0=j0*29*(-1)+"px";
var juli00="0px"+"\u0020"+juli0;
$("#num"+(j0+1)).animate({
backgroundPosition:juli00}, 1500);}
</script>
<script src="ffSupp.js"></script>
</body>
jQuery的animate在火狐浏览器上不支持backgroundPositionX的解决方法的更多相关文章
- 【前端】jQuery的animate在火狐浏览器上不支持backgroundPosition的解决方法
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/4375678.html jQuery的animate是一个非常好用的东东,但某些动画效果支持得不够好,比如back ...
- JQuery Mobile 的引用代码,以及在手机浏览器上字体太小的解决办法
JQuery Mobile 的引用代码: <link rel="stylesheet" href="http://code.jquery.com/mobile/1. ...
- iphone 浏览器自动解析数字为号码解决方法
iphone 浏览器自动解析数字为号码解决方法 www.MyException.Cn 网友分享于:2015-10-09 浏览:0次 iphone 浏览器自动解析数字为号码解决办法 在工作中遇到 ...
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46| 分类: Easy UI|举报|字号 订阅 可以使用$.parser.pa ...
- 001. 使用ssh连接不上centos 6.5的解决方法及其解决中文乱码
1. 使用ssh连接不上centos 6.5的解决方法: 错误显示: Connecting to 192.168.1.106:22... Could not connect to '192.168.1 ...
- 【转】PLSQL developer 连接不上64位Oracle 的解决方法
PLSQL developer 连接不上64位Oracle 的解决方法 快乐无极 , 2012/06/13 10:10 , 开发文档 , 评论(6) , 阅读(140430) , Via 本站原创 大 ...
- PLSQL developer连接不上64位Oracle的解决方法
PLSQL developer连接不上64位Oracle的解决方法 64位下装Oracle 11g 64位,PLSQL Developer使用出现问题. 问题描述: 登录对话框中,数据库下拉框为空: ...
- Unable to find ‘struts.multipart.saveDir’ Struts2上传文件错误的解决方法
Unable to find ‘struts.multipart.saveDir’ Struts2上传文件错误的解决方法 在使用struts2的项目中上传文件的时候出现了一个这样的错误: 2011-7 ...
- 【转】Windows2008上传大文件的解决方法(iis7解决上传大容量文件)
2008上传大文件的解决方法:http://wenku.it168.com/d_000091739.shtml 2003上传大文件的解决方法:http://tech.v01.cn/windowsxit ...
随机推荐
- C++套接字类CxUdpSocket的设计
C++套接字类CxUdpSocket的设计 这是一个小巧的C++套接字类,类名.函数名和变量名均采用匈牙利命名法.小写的x代表我的姓氏首字母(谢欣能),个人习惯而已,如有雷同,纯属巧合. CxUdpS ...
- kubernetes service分析
service type k8s中service主要有三种: ClusterIP: use a cluster-internal IP only - this is the default and i ...
- Spring事务的传播行为 @Transactional(转)
Spring事务的传播行为 在service类前加上@Transactional,声明这个service所有方法需要事务管理.每一个业务方法开始时都会打开一个事务. Spring默认情况下会对运行期例 ...
- ActiveMQ NMS使用过程中的一点经验
最近,项目中使用到了ActiveMQ获取第三方推送过来的数据.具体背景是:公司需要监控全国各地车辆实时运行的GPS数据,但监控本身不是公司做的,而是交给第三方公司做,第三方采集GPS数据后推送给我们. ...
- Js-Html 前端系列--点击非Div区域隐藏Div
最近做项目要用到三字码下拉,调用一个插件,但是滚动条不能点击. 后来看另一个插件后突发奇想,在点击其他区域的时候隐藏这个Div就可以了. 背景:输入文字,弹出下拉Div,点击或者拉动Div滚动条选择, ...
- UE4创建空白关卡并添加碰撞体
让我们接着上次继续学习UE4引擎,今天我们学习下怎样创建空白的关卡以及添加碰撞物体. 一. 创建空白关卡 1) 点击文件 -> 新建关卡(或者按快捷键Ctrl+N). 2) 你可以选择Defau ...
- MySQL索引类型
一.简介 MySQL目前主要有以下几种索引类型:1.普通索引2.唯一索引3.主键索引4.组合索引5.全文索引 二.语句 CREATE TABLE table_name[col_name data ty ...
- 【Scala】Scala之String
一.前言 大数据领域的Spark.Kafka.Summingbird等都是由Scala语言编写而成,相比Java而言,Scala更精炼.由于笔者从事大数据相关的工作,所以有必要好好学习Scala语言, ...
- java基础(一)对象
对象的创建 Test test = new Test(); Test test = new Test("a"); 其实,对象被创建出来时,对象就是一个对象的引用,这个引用在内存中为 ...
- js实现表格的增删改查
这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...