基于jQuery實(shí)現(xiàn)照片墻自動(dòng)播放特效

2019-11-19 17:58:33

字體：大中小

供稿：網(wǎng)友

一個(gè)動(dòng)態(tài)展示圖片的頁(yè)面：

功能：定時(shí)從后臺(tái)取數(shù)據(jù)，進(jìn)行頁(yè)面圖片追加。對(duì)已經(jīng)在頁(yè)面中的圖片，進(jìn)行放大縮小動(dòng)畫(huà)展示。目前我們用于微信新關(guān)注用戶頭像展示。

<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>抽獎(jiǎng)</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://網(wǎng)址";   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>

界面截圖：