jQuery自由拖拽图片点击展开特效代码下载



9 35 12



特效描述:自由拖拽图片 点击展开,jQuery自由拖拽图片点击展开特效代码下载

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src='js/jqueryui-core-drag.js'></script>

3. HTML代码

<div id="container">
	<h1>点击下面的图片查看它!</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 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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片拖动 收缩导航菜单 文字拖动 文字收缩展开 拖动排序 图片收缩展开 弹出层拖动 拖动拽动 收缩收起展开

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到