jQuery Ajax实现异步无刷新分页图片显示动画

分类：PHP > Ajax 难易：初级

下载资源下载积分： 26 积分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="关键词123">
    <meta name="Description" content="描述">
	
	<link rel="shortcut icon" href="/picture/1.ico" />
	<!-- 
    <link href="./css/taobao2.css" rel="stylesheet" type="text/css" />
    -->
    <title>Document</title>
    <style type="text/css">
    	*{
    	  margin:0;
    	  padding:0;
    	}
    	#main{
    		width:480px;
    		height:240px;
    		padding:10px;
    		border:1px solid #DDD;
    		box-shadow: 0px 0px 5px #ddd;
    		margin:60px auto 0px auto;
    		position: relative;
    	}
    	#main .list{
    		width:100px;
    		padding:10px;
    		height: 60px;
    		float:left;
    	}
    	#main .list img{
    		width:98px;
    		height:58px;
    		border:1px solid #DDD;
    		border-radius: 3px;
    	}
    	#page{
    		width:480px;
    		text-align:center;
    		margin:0px auto;
    		padding:10px;
    		height:25px;
    	}
    	#page a{
    		padding:3px 8px;
    		border:1px solid #DDD;
    		box-shadow: 0px 0px 5px #ddd;
    		margin:10px;
    		color:#333;
    		text-decoration: none;

    	}
    </style>
</head>
<body>

<div id="main">
	<div class="list">
	   	<img src="./picture/3ajax_img/a1.jpg" alt="" width="" height="">
	</div>
	<div class="list">
	   	<img src="./picture/3ajax_img/a2.jpg" alt="" width="" height="">
	</div>
	<div class="list">
	   	<img src="./picture/3ajax_img/a3.jpg" alt="" width="" height="">
	</div>
	<div class="list">
	   	<img src="./picture/3ajax_img/a4.jpg" alt="" width="" height="">
	</div>
	<div class="list">
	   	<img src="./picture/3ajax_img/a5.jpg" alt="" width="" height="">
	</div>
	<div class="list">
	   	<img src="./picture/3ajax_img/a6.jpg" alt="" width="" height="">
	</div>
	<div class="list">
	   	<img src="./picture/3ajax_img/a7.jpg" alt="" width="" height="">
	</div>
	<div class="list">
	   	<img src="./picture/3ajax_img/a8.jpg" alt="" width="" height="">
	</div>
	<div class="list">
	   	<img src="./picture/3ajax_img/a7.jpg" alt="" width="" height="">
	</div>
	<div class="list">
	   	<img src="./picture/3ajax_img/a6.jpg" alt="" width="" height="">
	</div>
	<div class="list">
	   	<img src="./picture/3ajax_img/a5.jpg" alt="" width="" height="">
	</div>
	<div class="list">
	   	<img src="./picture/3ajax_img/a4.jpg" alt="" width="" height="">
	</div>
</div>
	<div id="page">
		<a href="3_ajax.php?page=1">1</a>
		<a href="3_ajax.php?page=2">2</a>
		<a href="3_ajax.php?page=3">3</a>	
	</div>



<script src="./js/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		var posarr = [];//目标点存储位置
		var l,t;
		$('#main .list').each(function(i){
			l = $(this)[0].offsetLeft;
			t = $(this)[0].offsetTop;
			posarr[i] = {left:l,top:t};
		})
		$('#main .list').each(function(n){
			//alert(posarr[n].left)
			$(this).css({position:'absolute',left:posarr[n].left,top:posarr[n].top})

		})
		$('#page a').click(function(){
			var url = $(this).attr('href');
			//alert(url);
			$.ajax({
				type:'GET',
				url:url,
				data:'',
				dataType:'json',
				success:function(data){
					hiddenlist(data)

				}//请求错误，请求完成
			})// ajax请求结束

			return false;

		})//点击函数结束,已经成功加载图片
//动画开始
        function hiddenlist(data){//收起图片
        	var aList = $('#main .list');
        	var index = aList.length;
			var iNow = index;
        	var t= setInterval(function(){
						aList.eq(index).animate({
							left:200,
							top:280,
							opacity:0
						},800,'',function(){//回调函数
							iNow--
							if(iNow <=0){
								loadList(data);//收起结束，调用load函数

							}

						});
						if(index>0){
							index--;
						}else{
							clearInterval(t);
						}
						

					},60)


        }//hiddenlist函数结束

    	function loadList(data){//展开图片
    		$('#main .list').remove();
					//alert(data);
					for(i in data){
						$('#main').append('<div class="list"><img src="'+data[i]+'" alt="" width="" height=""></div>');
					  $('#main .list').eq(i).css({//注意空格
						left:200,
						top:280,
						position:'absolute',//绝对定位
						opacity:0

					  })
					}//for in
					//$('#main .list').each(function(index){
						

					//})
					var index = 0;
					var aList = $('#main .list');

					//alert(aList.length)
					//return;
				var t= setInterval(function(){
						aList.eq(index).animate({
							left:posarr[index].left,
							top:posarr[index].top,
							opacity:1
						},800);
						if(index<aList.length-1){
							index++;
						}else{
							clearInterval(t);
						}
						

					},60)

    	} //loadlist函数


		
	})//总的function结束
</script>


</body>
</html>

<?php 
//sleep(3);

$db = include '3db.php';
$page = $_GET['page'];
$num =12;
$start =($page-1)*$num;
$end = $start+$num;
$data =array();
for($i =$start;$i<$end;$i++){
	$data[] = $db[$i];
}
exit(json_encode($data));

?>

<?php 
return array(
	'./picture/3ajax_img/a1.jpg',
	'./picture/3ajax_img/a2.jpg',
	'./picture/3ajax_img/a3.jpg',
	'./picture/3ajax_img/a4.jpg',
	'./picture/3ajax_img/a5.jpg',
	'./picture/3ajax_img/a6.jpg',
	'./picture/3ajax_img/a7.jpg',
	'./picture/3ajax_img/a8.jpg',
	'./picture/3ajax_img/a7.jpg',
	'./picture/3ajax_img/a6.jpg',
	'./picture/3ajax_img/a5.jpg',
	'./picture/3ajax_img/a4.jpg',
	'./picture/3ajax_img/b1.jpg',
	'./picture/3ajax_img/b2.jpg',
	'./picture/3ajax_img/b3.jpg',
	'./picture/3ajax_img/b4.jpg',
	'./picture/3ajax_img/b5.jpg',
	'./picture/3ajax_img/b6.jpg',
	'./picture/3ajax_img/b7.jpg',
	'./picture/3ajax_img/b8.jpg',
	'./picture/3ajax_img/b7.jpg',
	'./picture/3ajax_img/b6.jpg',
	'./picture/3ajax_img/b5.jpg',
	'./picture/3ajax_img/b4.jpg',
	'./picture/3ajax_img/c1.jpg',
	'./picture/3ajax_img/c2.jpg',
	'./picture/3ajax_img/c3.jpg',
	'./picture/3ajax_img/c4.jpg',
	'./picture/3ajax_img/c5.jpg',
	'./picture/3ajax_img/c6.jpg',
	'./picture/3ajax_img/c7.jpg',
	'./picture/3ajax_img/c8.jpg',
	'./picture/3ajax_img/c7.jpg',
	'./picture/3ajax_img/c6.jpg',
	'./picture/3ajax_img/c5.jpg',
	'./picture/3ajax_img/c4.jpg'
	
	);


 ?>