jQuery可自由拖拽的照片墙

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需要引入一个页面的默认样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/default.css" media="screen" />

页面的body部分，将多张图片放入不同的li里面，整体置于一个div容器里即可，代码如下：

<div id="container">
	<h1>拖拽图片可自由摆放</h1>
	<ul id="images">
		<li><div>
			<a href="3dOcean.htm"><img alt="3dOcean" src="images/3docean_tn.jpg"/></a>
		</div></li>
		<li><div>
			<a href="AudioJungle.htm"><img alt="AudioJungle" src="images/audiojungle_tn.jpg"/></a>
		</div></li>
		<li><div>
		<a href="ActiveDen.htm"><img alt="ActiveDen" src="images/activeden_tn.jpg"/></a>
		</div></li>
		<li><div>
			<a href="GraphicRiver.htm"><img alt="GraphicRiver" src="images/graphicriver_tn.jpg"/></a>
		</div></li>
		<li><div>
			<a href="ThemeForest.htm"><img alt="ThemeForest" src="images/themeforest_tn.jpg"/></a>
		</div></li>
		<li><div>
			<a href="VideoHive.htm"><img alt="VideoHive" src="images/videohive_tn.jpg"/></a>
		</div></li>
	</ul>
</div>

页面的底部，先引入jQuery库、一个JS文件，然后设置好图片的拖动事件响应，代码如下：

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" 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>拖拽图片可自由摆放</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>