/* ==========================================================
 * 背景移动插件 v1.0
 * 功能说明:利用背景图像位置形成背景在动的动画,无限循环
 * 原创:/
 * ==========================================================
 * html结构:$对象
 * 参数:	moveDelay	移动延时
 *		movePx		移动距离
 *		direction	移动方向
 * ========================================================== */
 
(function(){
	$.fn.backgroundMove = function( option ){
		var defaults = {
			moveDelay:100,
			movePx: 1,
			direction:'left',
		}
		var options = $.extend({}, defaults, option);
		return this.each(function () {
			var startPos = 0;
			var self = $(this);
			var bgXY = 'x';
			
			switch (options.direction) {
				case 'left':
						options.movePx = -options.movePx;
					break;
				
				case 'up':
						options.movePx = -options.movePx;
						bgXY = 'y';
					break;
					
				case 'down':
						bgXY = 'y';
					break;
			}
			
			function doMove() {
				startPos = startPos + options.movePx;
				self.css('backgroundPosition-' + bgXY, startPos);
			}
			
			setInterval(doMove, options.moveDelay);
			
		})
	}
})($)

 

使用方法:

 

$(function(){
	
	//js
	$('#cloudFly').backgroundMove({
		moveDelay: 70,
		movePx: 1,
		direction: 'left'
	});
	

});
 

 

附件下载:jquery.backgroundMove.zip

  哈尔滨品用软件有限公司致力于为哈尔滨的中小企业制作大气、美观的优秀网站,并且能够搭建符合百度排名规范的网站基底,使您的网站无需额外费用,即可稳步提升排名至首页。欢迎体验最佳的哈尔滨网站建设