CSS3相册图片加载进度条效果特效代码

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

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

以下是 CSS3相册图片加载进度条效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name="keywords" content="JS代码,相册代码,JS广告代码,JS特效代码" />
    <meta name="description" content="此代码内容为CSS3相册图片加载进度条效果，属于站长常用代码" />
    <title>CSS3相册图片加载进度条效果</title>
    <link href="css/nprogress.css" rel="stylesheet" />
    <link href="css/lrtk.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <!--[if lt IE 9]>
        <script src="js/html5.js"></script>
    <![endif]-->
</head>
<body>
    <!-- 代码 开始 -->
    <div id="main"></div>
    <a href="#" id="loadMore">加载更多图片</a>
    <script src="js/nprogress.js"></script>
    <script src="js/script.js"></script>
    <!-- 代码 结束 -->
</body>
</html>

JS代码(nprogress.js):

/*! NProgress (c) 2013,Rico Sta. Cruz * http://ricostacruz.com/nprogress */
;
	(function(factory){
	if (typeof module === 'function'){
	module.exports = factory(this.jQuery || require('jquery'));
}
else if (typeof define === 'function' && define.amd){
	define(['jquery'],function($){
	return factory($);
}
);
}
else{
	this.NProgress = factory(this.jQuery);
}
}
)(function($){
	var NProgress ={
}
;
	NProgress.version = '0.1.2';
	var Settings = NProgress.settings ={
	minimum:0.08,easing:'ease',positionUsing:'',speed:200,trickle:true,trickleRate:0.02,trickleSpeed:800,showSpinner:true,template:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'}
;
	/** * Updates configuration. * * NProgress.configure({
	* minimum:0.1 *}
);
	*/
 NProgress.configure = function(options){
	$.extend(Settings,options);
	return this;
}
;
	/** * Last number. */
 NProgress.status = null;
	/** * Sets the progress bar status,where `n` is a number from `0.0` to `1.0`. * * NProgress.set(0.4);
	* NProgress.set(1.0);
	*/
 NProgress.set = function(n){
	var started = NProgress.isStarted();
	n = clamp(n,Settings.minimum,1);
	NProgress.status = (n === 1 ? null:n);
	var $progress = NProgress.render(!started),$bar = $progress.find('[role="bar"]'),speed = Settings.speed,ease = Settings.easing;
	$progress[0].offsetWidth;
	/* Repaint */
 $progress.queue(function(next){
	// Set positionUsing if it hasn't already been set if (Settings.positionUsing === '') Settings.positionUsing = NProgress.getPositioningCSS();
	// Add transition $bar.css(barPositionCSS(n,speed,ease));
	if (n === 1){
	// Fade out $progress.css({
	transition:'none',opacity:1}
);
	$progress[0].offsetWidth;
	/* Repaint */
 setTimeout(function(){
	$progress.css({
	transition:'all '+speed+'ms linear',opacity:0}
);
	setTimeout(function(){
	NProgress.remove();
	next();
}
,speed);
}
,speed);
}
else{
	setTimeout(next,speed);
}
}
);
	return this;
}
;
	NProgress.isStarted = function(){
	return typeof NProgress.status === 'number';
}
;
	/** * Shows the progress bar. * This is the same as setting the status to 0%,except that it doesn't go backwards. * * NProgress.start();
	* */
 NProgress.start = function(){
	if (!NProgress.status) NProgress.set(0);
	var work = function(){
	setTimeout(function(){
	if (!NProgress.status) return;
	NProgress.trickle();
	work();
}
,Settings.trickleSpeed);
}
;
	if (Settings.trickle) work();
	return this;
}
;
	/** * Hides the progress bar. * This is the *sort of* the same as setting the status to 100%,with the * difference being `done()` makes some placebo effect of some realistic motion. * * NProgress.done();
	* * If `true` is passed,it will show the progress bar even if its hidden. * * NProgress.done(true);
	*/
 NProgress.done = function(force){
	if (!force && !NProgress.status) return this;
	return NProgress.inc(0.3 + 0.5 * Math.random()).set(1);
}
;
	/** * Increments by a random amount. */
 NProgress.inc = function(amount){
	var n = NProgress.status;
	if (!n){
	return NProgress.start();
}
else{
	if (typeof amount !== 'number'){
	amount = (1 - n) * clamp(Math.random() * n,0.1,0.95);
}
n = clamp(n + amount,0,0.994);
	return NProgress.set(n);
}
}
;
	NProgress.trickle = function(){
	return NProgress.inc(Math.random() * Settings.trickleRate);
}
;
	/** * (Internal) renders the progress bar markup based on the `template` * setting. */
 NProgress.render = function(fromStart){
	if (NProgress.isRendered()) return $("#nprogress");
	$('html').addClass('nprogress-busy');
	var $el = $("<div id='nprogress'>") .html(Settings.template);
	var perc = fromStart ? '-100':toBarPerc(NProgress.status || 0);
	$el.find('[role="bar"]').css({
	transition:'all 0 linear',transform:'translate3d('+perc+'%,0,0)'}
);
	if (!Settings.showSpinner) $el.find('[role="spinner"]').remove();
	$el.appendTo(document.body);
	return $el;
}
;
	/** * Removes the element. Opposite of render(). */
 NProgress.remove = function(){
	$('html').removeClass('nprogress-busy');
	$('#nprogress').remove();
}
;
	/** * Checks if the progress bar is rendered. */
 NProgress.isRendered = function(){
	return ($("#nprogress").length > 0);
}
;
	/** * Determine which positioning CSS rule to use. */
 NProgress.getPositioningCSS = function(){
	// Sniff on document.body.style var bodyStyle = document.body.style;
	// Sniff prefixes var vendorPrefix = ('WebkitTransform' in bodyStyle) ? 'Webkit':('MozTransform' in bodyStyle) ? 'Moz':('msTransform' in bodyStyle) ? 'ms':('OTransform' in bodyStyle) ? 'O':'';
	if (vendorPrefix + 'Perspective' in bodyStyle){
	// Modern browsers with 3D support,e.g. Webkit,IE10 return 'translate3d';
}
else if (vendorPrefix + 'Transform' in bodyStyle){
	// Browsers without 3D support,e.g. IE9 return 'translate';
}
else{
	// Browsers without translate() support,e.g. IE7-8 return 'margin';
}
}
;
	/** * Helpers */
 function clamp(n,min,max){
	if (n < min) return min;
	if (n > max) return max;
	return n;
}
/** * (Internal) converts a percentage (`0..1`) to a bar translateX * percentage (`-100%..0%`). */
 function toBarPerc(n){
	return (-1 + n) * 100;
}
/** * (Internal) returns the correct CSS for changing the bar's * position given an n percentage,and speed and ease from Settings */
 function barPositionCSS(n,speed,ease){
	var barCSS;
	if (Settings.positionUsing === 'translate3d'){
	barCSS ={
	transform:'translate3d('+toBarPerc(n)+'%,0,0)'}
;
}
else if (Settings.positionUsing === 'translate'){
	barCSS ={
	transform:'translate('+toBarPerc(n)+'%,0)'}
;
}
else{
	barCSS ={
	'margin-left':toBarPerc(n)+'%'}
;
}
barCSS.transition = 'all '+speed+'ms '+ease;
	return barCSS;
}
return NProgress;
}
);

JS代码(script.js):

(function($){
	// An array with photos to show on the page. In a normal web app// you would fetch this array from your server with AJAX.var photos = ['http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/1.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/2.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/3.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/4.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/5.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/6.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/7.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/8.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/9.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/10.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/11.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/12.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/13.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/14.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/15.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/16.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/17.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/18.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/19.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/20.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/21.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/22.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/23.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/24.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/25.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/26.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/27.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/28.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/29.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/30.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/31.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/32.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/33.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/34.jpg','http://cdn.demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/photos/35.jpg'];
	$(document).ready(function(){
	var page = 0,loaded = 0,perpage = 10,main = $('#main'),expected = perpage,loadMore = $('#loadMore');
	// Listen for custom eventsmain.on('image-loaded',function(){
	// When such an event occurs,advance the progress barloaded++;
	// This function takes a number between 0 and 1NProgress.set(loaded/expected);
	if(page*perpage >= photos.length){
	// If there are no more photos to show,// remove the load button from the pageloadMore.remove();
}
}
);
	// When the load button is clicked,show 10 more images// (controlled by the perpage variable)loadMore.click(function(e){
	e.preventDefault();
	loaded = 0;
	expected = 0;
	var deferred = $.Deferred().resolve();
	// Get a slice of the photos array,and show the photos. Depending// on the size of the array,there may be less than perpage photos shown:$.each(photos.slice(page*perpage,page*perpage + perpage),function(){
	deferred = main.showImage(this,deferred);
	expected++;
}
);
	// Start the progress bar animationNProgress.start();
	page++;
}
);
	loadMore.click();
}
);
	// Create a new jQuery plugin,which takes two arguments:// src - the URL of an image// deferred - a jQuery deferred object,created by the previously shown photo$.fn.showImage = function(src,deferred){
	var elem = $(this);
	// The deferred that this function will returnvar result = $.Deferred();
	// Construct the markupvar holder = $('<div class="photo" />').appendTo(elem);
	// Start loading the the imagevar img = $('<img>');
	img.load(function(){
	// The photo has been loaded! Use the always method of the deferred// to get notified when the previous image has been loaded. When this happens,// show the current one.deferred.always(function(){
	// Trigger a custom event on the #main div:elem.trigger('image-loaded');
	// Append the image to the page and reveal it with an animationimg.hide().appendTo(holder).delay(100).fadeIn('fast',function(){
	// Resolve the returned deferred. This will notifiy// the next photo on the page and call its always callbackresult.resolve()}
);
}
);
}
);
	img.attr('src',src);
	// Return the deferred (it has not been resolved at this point)return result;
}
}
)(jQuery);

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
*{margin:0;padding:0;}
/*-------------------------General Styles--------------------------*/
body{font:15px/1.3 'PT Sans Narrow',sans-serif;color:#5e5b64;padding-bottom:120px;}
a,a:visited{outline:none;color:#389dc1;}
a:hover{text-decoration:none;}
section,footer,header,aside{display:block;}
/*-------------------------The main container--------------------------*/
h1{font:bold 48px 'PT Sans Narrow',sans-serif;color:#5e5b64;text-align:center;padding-top:80px;position:relative;}
#main{position:relative;width:540px;margin:0 auto;padding-top:80px;}
#main .photo{background-color:#eee;height:320px;overflow:hidden;margin-bottom:10px;border-radius:2px;}
#main .photo img{width:100%;border-radius:2px;}
#loadMore{background-color:#5e9db7;background:-webkit-linear-gradient(top,#5f9eb9,#5c99b3);background:-moz-linear-gradient(top,#5f9eb9,#5c99b3);background:linear-gradient(top,#5f9eb9,#5c99b3);display:block;padding:18px 0;margin:20px auto 20px;width:540px;font-weight:bold;font-size:22px;text-align:center;text-decoration:none !important;color:#fff !important;border-radius:2px;box-shadow:0 1px 1px #e0e0e0;opacity:0.9;}
#loadMore:hover{opacity:1;}

CSS代码(nprogress.css):

/* Make clicks pass-through */
#nprogress{pointer-events:none;}
#nprogress .bar{background:#29d;position:fixed;z-index:100;top:0;left:0;width:100%;height:2px;}
/* Fancy blur effect */
#nprogress .peg{display:block;position:absolute;right:0px;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1.0;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px);}
/* Remove these to get rid of the spinner */
#nprogress .spinner{display:block;position:fixed;z-index:100;top:15px;right:15px;}
#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:solid 2px transparent;border-top-color:#29d;border-left-color:#29d;border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite;}
@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@keyframes nprogress-spinner{0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

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