jQuery背景无限循环缩放特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery背景无限循环缩放特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery背景无限循环缩放特效</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<header class="htmleaf-header">
	<div class="content">
        <div id="logo"><span class="color-1">内容</span><span class="color-2"></span></div>
	</div>
</header>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.mkinfinite.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('header').mkinfinite({
			maxZoom:       1.4,
			animationTime: 4000,
			imagesRatio:   (960 / 720),
			isFixedBG:     true,
			zoomIn:        true,
			imagesList:    new Array(
				'img/1.jpg',
				'img/2.jpg',
				'img/1.jpg',
				'img/2.jpg',
				'img/1.jpg',
				'img/2.jpg'
			)
		});
	});
</script>
</body>
</html>

JS代码(jquery.mkinfinite.js):

/*MKInfinite v1.0.0Copyright (c) 2015 Mikhail KelnerReleased under the MIT License <http://www.opensource.org/licenses/mit-license.php>*/
(function($){
	jQuery.fn.mkinfinite = function(options){
	var options = $.extend({
	maxZoom:1.25,imagesRatio:1.5,animationTime:5000,animationInterval:10,isFixedBG:false,zoomIn:true,imagesList:new Array(),}
,options);
	var currentImage = 1;
	var currentZoom = 1;
	var animationStep = 0.1;
	var $object;
	var make = function(){
	currentZoom = options.zoomIn ? options.maxZoom:1;
	animationStep = (options.maxZoom - 1) / ( options.animationTime / options.animationInterval );
	if (!options.zoomIn){
	animationStep = -1 * animationStep;
}
$object = $(this);
	$object.css({
	'background-position':'50% 50%','background-repeat':'no-repeat'}
);
	$object.addClass('mkinfinite');
	if (options.imagesList.length > 1){
	calculateZoom(currentImage);
}
animateBG();
}
;
	var calculateZoom = function(setImageNumber){
	var nBGw = ( options.isFixedBG ? $(window).width():$object.width() ) * currentZoom;
	var nBGh = $object.height() * currentZoom;
	if ( (nBGw / nBGh) > options.imagesRatio ){
	nBGw = Math.round(nBGw);
	nBGh = Math.round(nBGw / options.imagesRatio);
}
else{
	nBGw = Math.round(nBGh * options.imagesRatio);
	nBGh = Math.round(nBGh);
}
if (setImageNumber && (setImageNumber > 0)){
	$object.css({
	'background-size':nBGw + 'px ' + nBGh + 'px','background-image':'url(' + options.imagesList[setImageNumber - 1] + ')'}
);
	var imgLoader = new Image();
	imgLoader.src = options.imagesList[setImageNumber % options.imagesList.length];
}
else{
	$object.css('background-size',nBGw + 'px ' + nBGh + 'px');
}
}
var animateBG = function(){
	if ( options.zoomIn && (currentZoom >= 1) || !options.zoomIn && (currentZoom <= options.maxZoom) ){
	setTimeout(function(){
	calculateZoom();
	currentZoom = currentZoom - animationStep;
	animateBG();
}
,options.animationInterval);
}
else{
	currentZoom = options.zoomIn ? options.maxZoom:1;
	if (options.imagesList.length > 1){
	currentImage = currentImage % options.imagesList.length + 1;
	calculateZoom(currentImage);
}
else{
	calculateZoom();
}
animateBG();
}
}
return this.each(make);
}
;
}
)(jQuery);

CSS代码(style.css):

@CHARSET "UTF-8";/* HTML5 defaults */
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{background:none repeat scroll 0 0 transparent;border:0 none;font-size:100%;margin:0;outline:0 none;padding:0;vertical-align:baseline;}
article,aside,figcaption,figure,footer,header,hgroup,nav,section,time{display:block;}
/* Theme */
html,body{height:100%;margin:0px;padding:0px;}
body{font-family:'Open Sans',sans-serif;min-width:999px;}
header{height:100%;position:relative;}
header div.content{width:100%;position:absolute;left:0px;right:0px;top:50%;max-width:none;height:290px;margin-top:-145px;background:rgba(255,255,255,0.5);text-align:center;}
/*header div.content h1{font-size:12pt;font-weight:normal;}
*/
header div#logo{font-family:Raleway,cursive;font-size:48pt;text-align:center;padding-top:30px;color:#CC002A;}
/*header div.content h1{color:#222222;}
*/
header .buttons-wrapper div.buttons div a:hover{color:#222222;}
.color-1{color:#CC002A;}
.color-2{color:#ff007f;}

附件:下载该文件资源,减少时间成本(增值服务)