jquery点击按钮网格布局切换js代码

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

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

以下是 jquery点击按钮网格布局切换js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery点击按钮网格布局切换</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>

<div class="grid"></div>
<span class="animate">Click</span>

<!-- jQuery -->
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="js/jquery.easing.min.js" type="text/javascript"></script>
<script src="js/index.js"></script>
<br><br><br><br>
</body>
</html>

JS代码(index.js):

//Creating 50 thumbnails inside .grid//the images are stored on the server serially. So we can use a loop to generate the HTML.var images = "",count = 50;
	for(var i = 1;
	i <= count;
	i++)images += '<img src="images/'+i+'.jpg" />';
	//appending the images to .grid$(".grid").append(images);
	var d = 0;
	//delayvar ry,tz,s;
	//transform params//animation time$(".animate").on("click",function(){
	//fading out the thumbnails with style$("img").each(function(){
	d = Math.random()*1000;
	//1ms to 1000ms delay$(this).delay(d).animate({
	opacity:0}
,{
	//while the thumbnails are fading out,we will use the step function to apply some transforms. variable n will give the current opacity in the animation.step:function(n){
	s = 1-n;
	//scale - will animate from 0 to 1$(this).css("transform","scale("+s+")");
}
,duration:1000,}
)}
).promise().done(function(){
	//after *promising* and *doing* the fadeout animation we will bring the images backstorm();
}
)}
)//bringing back the images with stylefunction storm(){
	$("img").each(function(){
	d = Math.random()*1000;
	$(this).delay(d).animate({
	opacity:1}
,{
	step:function(n){
	//rotating the images on the Y axis from 360deg to 0degry = (1-n)*360;
	//translating the images from 1000px to 0pxtz = (1-n)*1000;
	//applying the transformation$(this).css("transform","rotateY("+ry+"deg) translateZ("+tz+"px)");
}
,duration:3000,//some easing fun. Comes from the jquery easing plugin.easing:'easeOutQuint',}
)}
)}

CSS代码(style.css):

/*Montserrat font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);/*basic reset*/
*{margin:0;padding:0;}
body{text-align:center;overflow:hidden;}
.grid{width:600px;height:300px;margin:100px auto 50px auto;perspective:500px;/*For 3d*/
}
.grid img{width:60px;height:60px;display:block;float:left;}
.animate{font:12px Montserrat;text-transform:uppercase;background:rgb(0,100,0);color:white;padding:10px 20px;border-radius:5px;cursor:pointer;}
.animate:hover{background:rgb(0,75,0);}

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