基于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 相关文章推荐
jquery UI 1.72 之datepicker
Dec 29 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
js常用代码段整理
Nov 30 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
angular.js实现购物车功能
Oct 23 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python 忽略warning的输出方法
2018/10/18 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
Python列表操作方法详解
2020/02/09 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
抽象类和接口的区别
2012/09/19 面试题
单位单身证明范本
2014/01/11 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
电子商务实训报告总结
2014/11/05 职场文书
怎样写观后感
2015/06/19 职场文书
清明节随笔
2015/08/15 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB