在网页制作动画特效的时候,有时候想通过背景插入图片,然后通过控制背景显示的位置来实现一些动画效果,这样就不用使用绝对定位控制left和top来实现动画效果!但是jquery本身的动画函数是不支持背景动画的!这里就介绍通过一个动画插件来实现背景动画的效果!

代码如下!(jqBackgroundPositionAnimate.js)

/* Revision for the advanced version of jQuery.  weibo.com/61557518  */
(function($) {if (!document.defaultView || !document.defaultView.getComputedStyle) {var oldCurCSS = $.curCSS;$.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 = $.css(fx.elem, 'backgroundPosition');if (!start) {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);

上面的代码是jquery的扩展,所以使用前先引入jquery!

使用方法如下:

$("#select").animate({backgroundPosition: '(0 0)'}, {duration:300,complete: function(){  /*   动画结束执行的脚本  */});$("#select").animate({backgroundPosition: '(left -873px)'}, {duration:300})//duration 速度(单位毫秒)

这个插件兼容性还是可以的,支持IE6,和其他主流的浏览器,效果还是不错的!关键是省去了很多写结构的时间,直接用背景定位来代替!

转载于:https://www.cnblogs.com/shizhouyu/p/3939381.html

jquery背景动画插件使用相关推荐

  1. Lazy Line Painter – 很有趣的 jQuery 路径动画插件

    Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...

  2. html数字变换插件,轻量级jquery数字动画插件

    jquery.countup.js是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 该数字动画插件可以控制动画的延迟时间和动画过渡时间.它依赖于 ...

  3. 【完成发布】Lazy Line Painter – 非常有趣的 jQuery 路径动画插件

    Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...

  4. jquery数字动画插件jquery.animateNumber.js

    jq数字动画插件-jquery.animateNumber.js,可以实现数字的动画显示效果,比如从1跑到36500,从1%跑到100%类似这样的效果,数字动画效果控制多样,非常不错. jquery. ...

  5. jquery 背景图片_使用jQuery的美丽背景图片导航

    jquery 背景图片 View demo 查看演示 Download Source 下载源 In this tutorial we are going to create a beautiful n ...

  6. jQuery Color Animate (jQuery 颜色变换动画) 插件

    转载地址: http://blog.netsh.org/posts/jquery-color-animate-plugin_619.netsh.html 弥补jQuery的不足 我们知道jQuery几 ...

  7. H5C3动画实例,通过基于jQuery的fullpage插件完成

    要点: 1.素材是黑马程序员的,自己重写了下代码,主要是为了体会下h5c3. 2.环境 : 3.主要是加入了pullpage的插件特有的功能帮助开发,其中基于jQuery开发的插件,其定义的方法一般都 ...

  8. jquery制作动画的几种插件使用

    fullpage 全屏插件 全屏滚动效果,原生js也很好实现,主要是用 mousewheel 鼠标滚轮滚动事件, 来判断上滚动还是下滚动,之后设置每次滚动的高度为屏幕的高度即可.但是,虽然效果简单,但 ...

  9. jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

最新文章

  1. erp框架 saas_【观察】一周之后,浪潮云ERP将直面数字化转型2.0四大攻坚战
  2. JAVA API-----String类和StringBuffer类
  3. python 用两个栈实现一个队列
  4. PHP - 图像处理
  5. Android逆向笔记-使用Android Studio调试Smali代码(方式二)
  6. 世界上有条件JavaScript是什么?
  7. xadmin可能是帮助我完成django网站的一大助力
  8. Spring Cloud:服务消费(Ribbon)【Dalston版】
  9. java环境配置指南
  10. 解决通达OA2017版本手机端选择不到2021年的问题,手机端只能选择到2020年
  11. 常见的SREng操作
  12. mysql查询不到的数据补0
  13. 【IM-03】Web端匿名聊天
  14. Axure RP 基于母版实现页面框架/页眉/页脚/导航栏
  15. 从零开始学数据分析之——《笨办法学Python》(习题0-10)
  16. python制作自己的专属二维码
  17. java 教学大纲_Java程序设计课程教学大纲
  18. 【矩阵论】01——线性空间——基本概念
  19. c# 全选快捷键等类似事件
  20. 一本通1527欧拉回路

热门文章

  1. TinyURL生成器
  2. 问题 L: 求100以内的素数
  3. OpenCV-python学习笔记(四)——smoothing and blurring平滑和模糊
  4. MySQL练习题和代码附录
  5. oir 用image j打开的插件_Windows 上使用 VSCode Remote 插件进行远程开发
  6. java中引用数据类型和基本数据类型的一些区别(貌似不完整,但会有些启示)
  7. Python生成词云
  8. TriumphX与Metaverse NFT艺术家RisingSun签署专属合同
  9. BM:我离开EOS的报道被夸大了 期待与社区合作
  10. djaogo配置session使用redis