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

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

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

<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://xiazai.jb51.net/201701/yuanma/jqueryphoto(jb51.net).rar

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