平武建站

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

这篇文章将为大家详细讲解有关jQuery如何实现照片墙自动播放特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为都安企业提供专业的网站制作、成都网站制作，都安网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

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

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

 
 
  
  
  抽奖 
   
 
 
 
 
   
       
      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');              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('');          // 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();    

界面截图：

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

关于“jQuery如何实现照片墙自动播放特效”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


本文名称：jQuery如何实现照片墙自动播放特效
链接地址：http://pwwzsj.com/article/jdppip.html

其他资讯