一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2017-01-14 编辑:简简单单 来源:一聚教程网

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

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

 

 代码如下复制代码

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

            varhimg=jsonarr[i].headImg;

            if(himg==''){

              himg="/activity/draw/images/1.jpg";

            }

            $("#content").prepend('');

            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();


界面截图:

热门栏目