一个动态展示图片的页面：
功能：定时从后台取数据，进行页面图片追加。对已经在页面中的图片，进行放大缩小动画展示。目前我们用于微信新关注用户头像展示。
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>抽奖</title> <script src="../../js/jquery-1.7.2.min.js"></script> <style> 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; } </style> </head> <body> <div class="bigpic" style="display: none;"> <img class="bigimg" src="" /> </div> <div id="content" style="position: absolute;border:0;padding:0;margin-top: 10px;" > <!-- <img src="images/1.jpg" class="img" /> <img src="images/2.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/2.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/2.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/2.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/2.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> <img src="images/1.jpg" class="img" /> --> </div> <script type="text/javascript"> 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<jsonarr.length;i++){ var himg = jsonarr[i].headImg; if(himg==''){ himg = "/activity/draw/images/1.jpg"; } $("#content").prepend('<img src="'+url+jsonarr[i].headImg+'" class="img" />'); 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('<img src="images/2.jpg" class="img" />'); // 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(); </script></body></html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/shili/s50581.shtml
