`

让firefox支持背景动画

阅读更多
// for supporting background-position animation in firefox

(function($) {
	if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
		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 = $.curCSS(fx.elem,'backgroundPosition');
			if(!start){//FF2 no inline-style fallback
				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;
		}
		//return;
		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);


    $('#bganim').animate({
        'background-position': '-1999px 0'
    }, 30000);
分享到:
评论

相关推荐

    Firefox的 Flash插件

    为了支持Flash内容的显示,Firefox需要安装相应的Flash Player插件。这个插件使得Firefox能够解析和执行SWF格式的Flash文件,这是Flash内容的主要载体。在文件列表中,"Firefox_flash_player.exe"正是用于在Firefox...

    html5漂浮的圆形动画背景特效.rar

    html5漂浮的圆形动画背景特效,打开网页后,网页背景显示随机数量、随机大小的圆形,填充颜色也不相同,这些圆形自由浮动,... 适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游等,不支持IE8及以下浏览器。

    火狐ActiveX插件安装

    - **默认不支持**:Mozilla Firefox浏览器出于安全考虑,默认情况下并不支持ActiveX控件。 - **替代方案**:虽然火狐浏览器不直接支持ActiveX,但用户可以通过安装特定插件或使用其他技术(如NPAPI插件、HTML5等)来...

    IE与Firefox的CSS兼容大全

    3. 动画:Firefox支持`-moz-animation`,而IE支持`-ms-animation`。 五、选择器支持 1. IE6-8对CSS2.1中的许多高级选择器支持有限,如`:nth-child()`、`:not()`等。 2. Firefox对CSS2.1和CSS3选择器支持较好。 ...

    Firefox火狐浏览器官方3.5 RC 2-win32版本exe安装包

    《Firefox火狐浏览器3.5 RC 2-win32版本:历史、功能与技术解析》 Firefox火狐浏览器,作为一款开源、免费的网络浏览器,由Mozilla基金会开发,以其强大的安全性和用户隐私保护机制,以及丰富的插件生态系统,赢得...

    弹出层锁窗口 背景变灰 支持Firefox ie6 ie7 opera safari --IGad

    这个效果适用于多种浏览器,包括Firefox、IE6、IE7、Opera和Safari,确保了良好的跨浏览器兼容性。 首先,我们来深入了解一下实现这个效果的关键技术。弹出层通常由HTML、CSS和JavaScript共同构建。HTML负责结构,...

    css在firefox IE的兼容性(案例分析及解决方案)

    9. **CSS动画和过渡**:Firefox支持`transition`和`animation`,而IE10及以下版本需要`-ms-`前缀。同样,确保添加兼容性前缀。 10. **响应式设计**:Firefox和IE对媒体查询的支持不同,IE9及以下版本不支持`@media`...

    html5实现的可跟随鼠标移动银河星系流星雨背景动画特效源码.zip

    这是一款基于html5实现的可跟随鼠标移动银河星系流星雨背景动画特效源码,画面呈现出类似流星雨滑过天空一样的星空背景效果,移动鼠标则星空背景的流星雨方向也会跟随鼠标的移动而发生改变。点击鼠标则流行会出现...

    分享一个不错的选项卡tabpane支持firefox

    标题中的“选项卡tabpane支持Firefox”指的是在网页设计中使用的一种用户界面元素,它允许在一个固定的空间内展示多个视图或页面,通过切换选项卡来实现内容的切换,提高用户体验。这种技术在各种Web应用和网站中...

    jQuery实现全屏背景视频播放动画特效源码.zip

    为了确保跨浏览器的兼容性,开发者需要测试代码在不同浏览器(如Chrome、Firefox、Safari、Edge和Internet Explorer)上的表现。此外,考虑到移动设备的性能和网络状况,可能还需要优化视频质量和大小,以确保在各种...

    超级科幻炫酷可视化带音乐时空隧道特效背景动画.zip

    在这里,我们详细探讨一种名为“超级科幻炫酷可视化带音乐时空隧道特效背景动画”的JavaScript特效,这一特效不仅具备强大的视觉冲击力,而且还能与音乐同步,营造出一种前所未有的体验。 首先,作为网页开发中不可...

    ie firefox做了一个遮罩层

    尽管Firefox对现代Web标准有良好的支持,但有时仍需关注特定的浏览器渲染差异。例如,某些CSS3属性在Firefox中可能表现不同,需要使用前缀 `-moz-` 来确保兼容: ```css .shade { ... -moz-opacity: 0.5; /* Fire...

    jQuery实现的动画背景滑动切换效果源码.zip

    为了调试和优化代码,开发者可能会利用Chrome开发者工具或Firefox开发者工具,它们提供了丰富的功能,如实时编辑CSS、查看网络请求、分析性能等。同时,代码可能已经过压缩和最小化,以减少文件大小,提高网页加载...

    如何使flash在ie,firefox,safari网页中都显示透明的方法

    Flash 透明显示方法在 IE、Firefox、Safari 浏览器中 Flash 是一种常用的多媒体格式,它可以在网页中播放动画、视频、游戏等内容。然而,在不同的浏览器中,Flash 的显示效果可能会有所不同。今天,我们将讨论如何...

    炫酷几何图形背景HTML5动画特效.zip

    6. **浏览器兼容性**: 开发者可能需要关注不同浏览器之间的差异,确保动画在主流浏览器(如Chrome、Firefox、Safari、Edge等)上都能正常运行。这可能涉及到使用polyfills(代码片段来模拟新特性)或者选择支持广泛...

    CDUI(ChangDi UI)是一款基于Firefox OS的第三方启动器

    CDUI就是在这样的背景下诞生,旨在进一步提升Firefox OS的可用性和吸引力。 CDUI的核心特性可能包括以下几点: 1. **用户界面优化**:CDUI可能提供了与原生Gaia不同的界面设计,比如更直观的图标布局、更丰富的...

    兼容IE和firefox的弹出层.zip

    在网页开发过程中,兼容性问题始终是一个棘手的挑战,特别是对于那些老版本的浏览器,如Internet Explorer(IE)和Firefox。"兼容IE和firefox的弹出层.zip"这个压缩包文件显然提供了一个解决方案,旨在确保弹出层在...

    随鼠标移动背景特效.zip

    3. **兼容性**:Lava Lamp插件设计时考虑到了浏览器兼容性,支持多种主流浏览器,如Chrome、Firefox、Safari、Edge和Internet Explorer等。 4. **易用性**:集成到项目中非常简单,只需引入jQuery库和Lava Lamp插件...

    纯CSS的下拉菜单,支持IE6,IE7,Firefox

    本篇将深入探讨如何使用纯CSS实现一个兼容IE6、IE7及Firefox的下拉菜单。 一、CSS下拉菜单的基本结构 首先,我们需要创建HTML结构。一个简单的下拉菜单通常由一个`<ul>`元素作为主要菜单容器,每个`<li>`元素表示一...

    背景自动切换css模板

    7. 兼容性测试:在实际应用中,需要确保模板在各种主流浏览器(如Chrome、Firefox、Safari、Edge等)上都能正常运行,避免出现兼容性问题。 综上所述,"背景自动切换css模板"是一个利用CSS3和JavaScript技术实现的...

Global site tag (gtag.js) - Google Analytics