jQuery的animate在火狐浏览器上不支持backgroundPositionX的解决方法

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量85 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/cocozj945/p/5278515.html
版权

在网上找的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>

　　

转载于:https://www.cnblogs.com/cocozj945/p/5278515.html

weixin_30439067
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS-背景位置-x | background-position-x
weixin_33910385的博客
09-12 1988
ackground-position-xCSS 属性设置水平方向的位置，与每个背景图片等位置层设置属性background-origin相关。更多信息请查看background-position属性，这个用的比较普遍。 /* Keyword values */ background-position-x: left; backgro...
jQuery animate中background-position 无效的解决方法
denghuang4935的博客
05-03 328
今天做一个网站刚好要用到背景动画效果； 开始自己$(this).animate({"background-position": "0 0"}, "fast")这样写了但发现没有效果； 然后在网上找了一下解决方法、解决方法如下： (function($) { if(!document.defaultView || !document.defaultView.getCom...
【前端】jQuery的animate在火狐浏览器上不支持backgroundPosition的解决方法
ance1569的博客
03-29 128
转载请注明出处：http://www.cnblogs.com/shamoyuu/p/4375678.html jQuery的animate是一个非常好用的东东，但某些动画效果支持得不够好，比如backgroundPosition这么好的东西火狐上竟然用不了，于是我就自己写了一个。 1 /** 2 * 自定义backgroundPosition的animate，支持火狐，j...
DIV背景图片在Firefox下不显示,IE下正常
weixin_30314793的博客
12-29 123
在一个大的div里有2个横列(DIV)，并且在大的div里加入背景图片。可是改好后，在Firefox下却无法正确显示背景图片。代码是这样的：1.HTML(样本)：<div id="footer"> <div id="footer_left">Content1</div> <div id="footer_right">Content2&l...
火狐浏览器不支持background-position-y
qq_39882537的博客
05-09 279
火狐的低版本兼容（47） 不识别 background-position-y 解决办法： background:url(‘’ no-repeat 0 -50px);
js取backgroundPositionX的值
weixin_30526593的博客
08-14 396
如果有内联样式通过elem.style.backgroundPosition可以取得backgroundPositionX和backgroundPositionY两个值，但是如果没有内联样式通过计算样式getComputedStyle(elem,null).backgroundPosition得到的总是返回IE下的backgroundPositionX的值，我还没有找到通过getComputed...
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
10-20
主要介绍了关于jQuery中animate()的使用方法及解决$("body").animate({"scrollTop":top})不被Firefox支持的问题，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
jquery中animate动画积累的解决方法
12-09
昨天一同学向我求助，说做了一个简单的动画效果，就是图片自动左右播放 代码如下: <span xss=removed> ... } $(‘.slidepics’).animate({‘left’: left + ‘px’},1000); left = left – _left; tim = setTimeout(sl
js实现类似jquery里animate动画效果的方法
12-04
本文实例讲述了js实现类似jquery里animate动画效果的方法。分享给大家供大家参考。具体分析如下： 该实例可实现鼠标移上，先宽度变化，再高度变化，最后透明度变化，鼠标移出，再依次变回去的效果。 要点一： start...
jQuery animate easing使用方法图文详解
01-19
从jQuery API 文档中可以知道，jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数： • properties：一组包含作为动画属性和终值的样式属性和及其值的集合 • ...
css中的background-position属性
baidu_24743861的博客
04-19 3398
1、background-position: x y ; background-position:100px 30x; 表示距离左边100像素，距离上边30像素 background-position:50% 10%; 在X轴居中，距离上方10%的距离 background-position:left top;左上（X轴的值可为left,center,right 、y轴的值可为left,ce...
background-position相关问题
m0_60197943的博客
10-07 314
background-position：x y 其中x与y分为方位名词与精确单位两种 首先是方位名词，主要有top/bottom/left/right/center 小测试： 问题一：使用方位名词，背景图是怎么移动位置的？ background-position:top center与background-position：center top 因此，对于方位名词，center top === top center 其实是这样的，background-position有两个
JavaScript中的backgroundPosition的设置
热门推荐
cherry_vicent的专栏
03-11 1万+
在CSS中background-position有对值的设置有两种：一是用数值（绝对的），另一个使用百分比（相对的）。这两种方式会有不同的浏览器兼容问题（主要是IE和FF）。 基本代码如下 style="overflow-y:scroll;height:300px;" charset="UTF-8"> mag3 rel="stylesheet"
backgroundPositionX和backgroundPositionY兼容性问题
李俊良
12-28 266
在某些时候我们需要通过backgroundPositionX和Y来直接翻转背景图片非常方便 但是你会发现，在FF和Oprea里面就不行了   你可能又会尝试通过使用backgroundPosition来同时设置两个参数来变化背景图片的位置，但是还是失败 因为IE也不支持backgroundPosition函数   解决办法，就是判断浏览器是IE还是别的 如果是IE，直接通过backg...
firefox、Opera不支持backgroundPosition拆分为backgroundPositionX和backgroundPositionY
meloseven的专栏
03-06 448
firefox、Opera不支持backgroundPosition拆分为backgroundPositionX和backgroundPositionY,CSS和JS中都不允许拆分 CSS: 比如现在是：background-position-x :20px; background-position-y :30px;需要改成background-position:20px 30px;JS 现在
div显示图片不全和background-size在ie和火狐下不生效的解决方法
xixiruyiruyi的博客
06-19 3132
div显示图片不全和background-size在ie和火狐下不生效的解决方法
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1084
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1058
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 324
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Jquery的animate不生效怎么解决
06-10
如果您使用jQuery的animate()方法时发现动画效果不生效，可以尝试以下几个解决方法： 1. 检查CSS属性是否正确设置：确保您正在尝试动画的CSS属性已经正确设置，例如width、height、margin等。 2. 检查jQuery版本：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值