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

 更新时间:2017年01月12日 16:47:09   作者:maskice  
这篇文章主要为大家详细介绍了基于jQuery实现照片墙自动播放特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

<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> 

界面截图:

参考:http://xiazai.jb51.net/201701/yuanma/jqueryphoto(jb51.net).rar

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

相关文章

  • jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】

    jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】

    这篇文章主要介绍了jQuery实现点击表格单元格就可以编辑内容的方法,涉及jQuery针对table表格元素的遍历与动态操作相关技巧,需要的朋友可以参考下
    2016-08-08
  • jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一

    jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一

    这篇文章主要介绍了jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一,需要的朋友可以参考下
    2017-05-05
  • jQuery选择器用法实例详解

    jQuery选择器用法实例详解

    这篇文章主要介绍了jQuery选择器用法,结合实例分析了jQuery选择器的具体使用技巧与注意事项,需要的朋友可以参考下
    2015-12-12
  • Jquery 在页面加载后执行的几种方式

    Jquery 在页面加载后执行的几种方式

    这篇文章主要介绍了Jquery 在页面加载后执行的几种方式,需要的朋友可以参考下
    2014-03-03
  • jQuery实现的下雪动画效果示例【附源码下载】

    jQuery实现的下雪动画效果示例【附源码下载】

    这篇文章主要介绍了jQuery实现的下雪动画效果,涉及jQuery插件结合setInterval、animate进行动画操作的相关使用技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2018-02-02
  • 深入理解jquery中extend的实现

    深入理解jquery中extend的实现

    extend()是jQuery中一个重要的函数,作用是实现对对象的扩展, 它经常用于jQuery插件的开发,jQuery内部也使用它来扩展属性方法,如noConflict方法,就是用extend方法来扩展的。下面来一起深入的再学习下jquery中extend的实现吧。
    2016-12-12
  • jQuery pagination分页示例详解

    jQuery pagination分页示例详解

    这篇文章主要为大家详细介绍了jQuery pagination分页示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • jQuery UI AutoComplete 使用说明

    jQuery UI AutoComplete 使用说明

    在 jQuery UI 的最近更新中增加了自动完成控件 AutoComplete,这为我们提供了又一个强大的开发工具,这里介绍一下这个控件的使用方式。
    2011-06-06
  • 喜大普奔!jQuery发布 3.0 最终版

    喜大普奔!jQuery发布 3.0 最终版

    jQuery发布已经十年了,挺让人难以置信。过去的这些年Web开发变了很多,jQuery也随之变化着。在这个过程中,团队一直在对确保过往代码的兼容支持和获取最好的Web开发实践的现实之间努力着。就在2天前,jQuery发布了新的3.0最终版本
    2016-06-06
  • jQuery图片轮播实现并封装(一)

    jQuery图片轮播实现并封装(一)

    这篇文章主要为大家详细介绍了jQuery图片轮播实现并封装,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论