jQuery带惯性相册效果js代码

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

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

以下是 jQuery带惯性相册效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8' />
	<title>可拖动且带有惯性效果的JS相册</title>
	<link type="text/css" rel="stylesheet" href="styles/default.css" media="screen" />
</head>
<body>
	<div id="container">
		<h1>Click on an image below to view it!</h1>
		
		<ul id="images">
			<li><div>
				<a href="3dOcean.htm"><img alt="3dOcean" src="images/thumbnails/3dOcean_tn.jpg"/></a>
			</div></li>
			<li><div>
				<a href="AudioJungle.htm"><img alt="AudioJungle" src="images/thumbnails/AudioJungle_tn.jpg"/></a>
			</div></li>
			<li><div>
			<a href="ActiveDen.htm"><img alt="ActiveDen" src="images/thumbnails/ActiveDen_tn.jpg"/></a>
			</div></li>
			<li><div>
				<a href="GraphicRiver.htm"><img alt="GraphicRiver" src="images/thumbnails/GraphicRiver_tn.jpg"/></a>
			</div></li>
			<li><div>
				<a href="ThemeForest.htm"><img alt="ThemeForest" src="images/thumbnails/ThemeForest_tn.jpg"/></a>
			</div></li>
			<li><div>
				<a href="VideoHive.htm"><img alt="VideoHive" src="images/thumbnails/VideoHive_tn.jpg"/></a>
			</div></li>
		</ul>
		
	</div>
	<script src='js/jquery-1.7.2.min.js'></script>
	<script src='js/jqueryui-core-drag.js'></script>
	<script type="text/javascript">		
//*	
	var imgs;
		
	$(document).ready(function () {
	var drag = {};
		$('h1').remove();
		$('#images').append('<li id="instructions"><h4>Toss the images around; if you see one you like, click on it!</h4></li>');
		
		imgs = $("#images li");

		imgs.draggable({ 
			stack : { group : '#images li', min : 1},
			start : function () {
				$this = $(this);
				if($this.attr('id') === 'instructions') { $this.fadeOut().remove(); }
				
				imgs.each(function () {
					var $this = $(this);
					if($this.width() !== 256) {
						$this.stop().animate({width : 256 }).removeClass('top');
					}
				});
				
				drag.startTime = new Date();
				drag.startPos = $this.position();
			},
			stop : function () {
				var $this = $(this), top, left, time;
				drag.endTime = new Date();
				drag.endPos = $this.position();
				drag.leftOffset = drag.endPos.left - drag.startPos.left;
				drag.topOffset  = drag.endPos.top  - drag.startPos.top;

				time = (drag.endTime.getTime() - drag.startTime.getTime()) /60;
				
				top  = (drag.topOffset / time).toString();
				left = (drag.leftOffset / time).toString();
				
				$this.animate({
					top : '+=' + top, 
					left: '+=' + left 
				});
			}
		});

		imgs.click(function () {
			var $this = $(this);
		
			if ($this.attr('id') == 'instructions') {
				$this.fadeOut().remove();
			}
			else {
				if($this.width() !== 256) {
					$this.stop().animate({width : 256 }).removeClass('top');
				}
				else {
					if (!($this.find('.info').length)) {
						$.ajax({
							url : $this.find('a').attr('href'),
							dataType : 'html',
							success : function (data) {
								var $d = $(data),
									head = $d.filter('h1'),
									para = $d.filter('p');
									
								$this.children('div').append('<div class="info"></div>').find(".info").append(head, para);
							},
							error : function () {
								var msg = '<h1>Oops!</h1><p>It looks like there been a problem; we can\'t get this info right now.</p>';
								$this.children('div').append('<div class="info"></div>').find(".info").html(msg);
							}
						});
					}
					$this.css({'zIndex' :8 })
							 .stop()
							 .animate({ width : 512})
							 .addClass('top')
								.siblings().removeClass('top')
										   .stop()
										   .animate({width : 256})
												.filter(function () { return $(this).css('zIndex') >= '8' }).css({'zIndex' : 7});
				}
			}
			return false;
		});
		
	});

$(window).load(function () {
	$w = $(window);
	imgs.css({
			position : 'absolute',
			left : $w.width() / 2 - imgs.width(),
			top  : $w.height() / 2- imgs.height()
		});
	for(var i = 0; imgs[i]; i++ ) {
		$(imgs[i]).animate({
				left : '+=' + Math.random()*150,
				top  : '+=' + Math.random()*150
			});
	}
});//*/
</script>
</body>
</html>

CSS代码(default.css):

/* Meyer's Reset */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,em,font,img,small,strong,dl,dt,dd,ol,ul,li{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
/* remember to define focus styles! */
:focus{outline:0;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
/* END Meyer's Reset */
body{font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif;background:#36b4dd;}
h1{font-size:30px;}
#container > h1{padding:10px;}
h4{font-size:20px;padding-bottom:10px;}
#images li{float:left;background:#ececec;border:1px solid #ccc;margin:10px;width:256px;padding:10px;overflow:hidden;/*border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;*/
}
#images li a{float:left;}
/*.top{box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-webkit-box-shadow:0 0 30px #000;}
*/
#images li div{width:512px;overflow:hidden;}
#images li .info{width:246px;padding:0 0 0 10px;float:left;

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