jQuery旋转预览画廊效果特效代码

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

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

以下是 jQuery旋转预览画廊效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating a modern gallery with Raphael</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/raphael.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
</head>
<body>
	<div class="wrapper">
		<div class="gallery">
			<ul class="reset">
				<li><img src="img/img1.jpg" alt="" /></li>
				<li><img src="img/img2.jpg" alt="" /></li>
				<li><img src="img/img3.jpg" alt="" /></li>
				<li><img src="img/img4.jpg" alt="" /></li>
				<li><img src="img/img5.jpg" alt="" /></li>
				<li><img src="img/img6.jpg" alt="" /></li>
				<li><img src="img/img7.jpg" alt="" /></li>
				<li><img src="img/img8.jpg" alt="" /></li>
			</ul>
		</div>
	</div>

</body>
</html>

JS代码(init.js):

$(function(){
	var li = $('.gallery').find('li');
	li.each(function(i){
	var t = $(this),img = t.find('img'),src = img.attr('src'),width = li.width(),height = li.height();
	img.hide().after($('<div />').attr('id','holder'+i).addClass('holder'));
	var r = Raphael('holder'+i,width*2,height*2),rimg = r.image(src,width/2,height/2,width,height);
	rimg.hover(function(event){
	this.animate({
	scale:2,rotation:360}
,1200,'elastic');
}
,function (event){
	this.animate({
	scale:1,rotation:0}
,1200,'elastic');
}
);
}
);
	li.hover(function(){
	li.css({
	'z-index':1}
);
	$(this).css({
	'z-index':2}
);
}
);
}
);

CSS代码(default.css):

/* ------ general-----------------------------------------------*/
body{font-family:Arial,Helvetica,sans-serif;background:#fff;font-size:11px;}
.wrapper{margin:200px auto 0;width:840px;}
ul.reset,ul.reset li{display:block;list-style:none;padding:0;margin:0;}
.gallery ul li{width:200px;height:200px;margin:0 10px 10px 0;float:left;position:relative;}
.holder{position:absolute;top:0;left:0;margin:-100px 0 0 -100px;}
a img{border:none;}

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