资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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://cdkjz.cn/article/jdppip.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
开元建校成都小程序商城重庆联通机房托管清舞人间网络营销推广内江做网站安卓开发精灵网中国（西部）云计算中心成都装饰装修

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图