java照片墙_基于jQuery实现照片墙自动播放特效

一个动态展示图片的页面：

功能：定时从后台取数据，进行页面图片追加。对已经在页面中的图片，进行放大缩小动画展示。目前我们用于微信新关注用户头像展示。

抽奖

body{

background-color:#000;

text-transform:uppercase;

color:#fff;

position: relative;

}

.img{

float:left;

margin:2px;

cursor:pointer;

opacity:0.4;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);

width : 60px;

height : 60px;

}

.bigpic { position: absolute; overflow: hidden; z-index: 99; }

.bigpic img { width: 100%;opacity:1; }

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

var himg = jsonarr[i].headImg;

if(himg==''){

himg = "/activity/draw/images/1.jpg";

}

$("#content").prepend('');

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();

界面截图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。