基于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 相关文章推荐
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
详解JS模块导入导出
Dec 20 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框架14种
2009/08/24 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
php实现购物车功能(上)
2020/07/23 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
javascript常用函数(1)
2015/11/04 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
大二自我鉴定范文
2013/10/05 职场文书
员工培训邀请函
2014/02/02 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书