jQuery如何实现照片墙自动播放特效
这篇文章将为大家详细讲解有关jQuery如何实现照片墙自动播放特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为都安企业提供专业的网站制作、成都网站制作，都安网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
一个动态展示图片的页面：
功能：定时从后台取数据，进行页面图片追加。对已经在页面中的图片，进行放大缩小动画展示。目前我们用于微信新关注用户头像展示。
抽奖
var t1 ;//= window.setTimeout(loadUser,1000);
//var t1 = window.setInterval(time,6000);
var idx = 0;
var maxNum = 0;
var maxId = 0;
var minId = 0;
var isBegin = 1;
var url = "http://网址";
function loadUser(){
$("#begin").css('display','none');
$.post("../../servlet/draw",
{
type : "messageList",
limit : 2,
maxId : maxId,
isBegin : isBegin,
time : new Date()
},
function(data,status){
var jsonobj=eval('('+data+')');
if(jsonobj.code=="200"){
isBegin = 0;
var jsonarr = jsonobj.list;
for(var i=0;i');
if(minId==0){
minId = jsonarr[i].id;
}
maxId = jsonarr[i].id;
maxNum = maxNum + 1;
if(idx!=0)
idx=idx+1;
}
//console.log("maxNum:"+maxNum);
t1 = window.setTimeout(time,1000);
}
});
}
function time(){
idx=idx+1;
var i = 1;
$(".img").each(function(){
var imgurl = $(this).attr("src");
//console.log(idx+" "+$(this).position().left);
if(i == idx){
$(this).css("opacity",1);
//if(i==3){
// $("#content").prepend('');
// idx=idx+1;
//}
$(".bigimg").attr({ "src": imgurl });
var bwidth = $(".bigimg").width();
var bheight = $(".bigimg").height();
var picleft = $(this).position().left;
var pictop = $(this).position().top;
var pic = $(this);
//console.log(idx+" "+bwidth+" "+bheight+" "+$(this).position().left+" "+$(this).position().top);
var o = { left: "50%", width: "600px", height: "600px", top: "50px", "margin-left": "-300px" };
$(".bigpic").width(60);
$(".bigpic").height(60);
$(".bigpic").css({ "left": $(this).position().left, "top": $(this).position().top});
$(".bigpic").show();
$(".bigpic").animate(o, 2000, function () {
setTimeout(function () {
$(".bigpic").animate({ width: "60px", left: pic.position().left, top: pic.position().top, "margin-left": "0", "margin-top": "0" }, 2000, function () {
//$(".bigpic").fadeOut(2000, function () {
$(".bigpic").hide();
//t1 = setTimeout(time, 1000);
loadUser();
});
}, 2000)
});
}else{
$(this).css("opacity",0.4);
}
i++;
});
if(maxNum == idx)
idx = 0;
}
loadUser();
界面截图：
关于“jQuery如何实现照片墙自动播放特效”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
本文标题：jQuery如何实现照片墙自动播放特效
文章网址：http://bjjierui.cn/article/jdppip.html
