jquery背景动画插件使用
在网页制作动画特效的时候,有时候想通过背景插入图片,然后通过控制背景显示的位置来实现一些动画效果,这样就不用使用绝对定位控制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背景动画插件使用相关推荐
- Lazy Line Painter – 很有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...
- html数字变换插件,轻量级jquery数字动画插件
jquery.countup.js是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 该数字动画插件可以控制动画的延迟时间和动画过渡时间.它依赖于 ...
- 【完成发布】Lazy Line Painter – 非常有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...
- jquery数字动画插件jquery.animateNumber.js
jq数字动画插件-jquery.animateNumber.js,可以实现数字的动画显示效果,比如从1跑到36500,从1%跑到100%类似这样的效果,数字动画效果控制多样,非常不错. jquery. ...
- jquery 背景图片_使用jQuery的美丽背景图片导航
jquery 背景图片 View demo 查看演示 Download Source 下载源 In this tutorial we are going to create a beautiful n ...
- jQuery Color Animate (jQuery 颜色变换动画) 插件
转载地址: http://blog.netsh.org/posts/jquery-color-animate-plugin_619.netsh.html 弥补jQuery的不足 我们知道jQuery几 ...
- H5C3动画实例,通过基于jQuery的fullpage插件完成
要点: 1.素材是黑马程序员的,自己重写了下代码,主要是为了体会下h5c3. 2.环境 : 3.主要是加入了pullpage的插件特有的功能帮助开发,其中基于jQuery开发的插件,其定义的方法一般都 ...
- jquery制作动画的几种插件使用
fullpage 全屏插件 全屏滚动效果,原生js也很好实现,主要是用 mousewheel 鼠标滚轮滚动事件, 来判断上滚动还是下滚动,之后设置每次滚动的高度为屏幕的高度即可.但是,虽然效果简单,但 ...
- jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
最新文章
- erp框架 saas_【观察】一周之后,浪潮云ERP将直面数字化转型2.0四大攻坚战
- JAVA API-----String类和StringBuffer类
- python 用两个栈实现一个队列
- PHP - 图像处理
- Android逆向笔记-使用Android Studio调试Smali代码(方式二)
- 世界上有条件JavaScript是什么?
- xadmin可能是帮助我完成django网站的一大助力
- Spring Cloud:服务消费(Ribbon)【Dalston版】
- java环境配置指南
- 解决通达OA2017版本手机端选择不到2021年的问题,手机端只能选择到2020年
- 常见的SREng操作
- mysql查询不到的数据补0
- 【IM-03】Web端匿名聊天
- Axure RP 基于母版实现页面框架/页眉/页脚/导航栏
- 从零开始学数据分析之——《笨办法学Python》(习题0-10)
- python制作自己的专属二维码
- java 教学大纲_Java程序设计课程教学大纲
- 【矩阵论】01——线性空间——基本概念
- c# 全选快捷键等类似事件
- 一本通1527欧拉回路