素材网 素材网

jQuery自由摆放图片点击展开特效

下载资源()次

阅读次数()次

发布时间:2017-08-24

jQuery自由摆放图片点击展开特效
分享到:

用法简介:

来源:xw素材网


jQuery自由摆放图片点击展开特效。
文件引用:

<script type="text/javascript" src="js/jquery.min.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>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。