jQuery Ajax实现异步无刷新分页图片显示动画
<!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'
);
?>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791