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

2019-11-19 17:58:33

字体：大中小

来源：转载

供稿：网友

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

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

<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>

界面截图：