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


Posted in Javascript onJanuary 12, 2017

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

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

<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.3water.com/201701/yuanma/jqueryphoto(3water.com).rar

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

Javascript 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 #Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 #Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 #Javascript
JS实现仿百度文库评分功能
Jan 12 #Javascript
移动端基础事件总结与应用
Jan 12 #Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 #Javascript
简单的渐变轮播插件
Jan 12 #Javascript
You might like
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php中使用GD库做验证码
2016/03/31 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
mongodb和php的用法详解
2019/03/25 PHP
动手学习无线电
2021/03/10 无线电
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python面向对象之Web静态服务器
2019/09/03 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
python中加背景音乐如何操作
2020/07/19 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
质量承诺书范文
2014/03/27 职场文书
求职意向书
2014/07/29 职场文书
重阳节慰问信
2015/02/15 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
法定授权委托证明书
2015/06/18 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers