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

如何基于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> 

界面截图:

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

参考:http://xiazai.jb51.net/201701/yuanma/jqueryphoto(jb51.net).rar

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