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

2024-10-13 13:35:47

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

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

<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

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

javascript实现了照片拖拽点击置顶的照片墙代码

演示图 styles.css *{ /*清空所有元素默认的外边距和内边距*/ } .photo_wall{ background:url(bg.jpg); /*定义照片墙的默认背景*/ background-size:cover; /*使照片墙的背景填充照片墙*/ width:1200px; /*设置照片墙的宽高*/ height:500px; margin:40px auto; /*设置照片墙的外边距*/ display:-webkit-box; /*使用CSS3的盒模型之流式布局*/ dis
js实现照片墙功能实例

本文实例讲述了js实现照片墙功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8">
原生Javascript和jQuery做轮播图简单例子

接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮
jQuery实现图片轮播效果代码

整理以前用jQuery实现的图片轮播效果. 1. 不做操作时,自动轮播 2. 鼠标悬浮在图片上时,停止自动轮播,隐藏在图片左右的箭头会显示出来 3. 手动轮播1:鼠标指向图片底部的小标按钮,可以切换对应的图片 4. 手动轮播2:点击左右箭头也可以切换图片效果图:(PS:用软件捕捉的,不太会弄,感觉图片都失真了) 下面是代码区域: **inde.html部分代码** <div class="box"> <ul class="img">
jquery Banner轮播选项卡

本文实例为大家分享了jquery Banner轮播选项卡的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wraper{ width: 1200px; margin: 0 auto; position: r
javascript制作照片墙及制作过程中出现的问题

本文主要做了一个照片墙,整个制作过程,主要需要解决一下几个问题: 1.如何进行布局转换? 2.如何对图片进行拖拽处理? 3.如何检测图片碰撞问题?进行碰撞检测 4.当多个图片进行碰撞,如何取其中距离对象最小的物体? 5.如何将相互碰撞的两个物体的位置相互交换?涉及到运动的类库代码如下: <html> <head> <style> body{background:black;margin: 0;padding: 0;color: white;font-size: 50p
Android照片墙应用实现再多的图片也不怕崩溃

照片墙这种功能现在应该算是挺常见了,在很多应用中你都可以经常看到照片墙的身影.它的设计思路其实也非常简单,用一个GridView控件当作"墙",然后随着GridView的滚动将一张张照片贴在"墙"上,这些照片可以是手机本地中存储的,也可以是从网上下载的.制作类似于这种的功能的应用,有一个非常重要的问题需要考虑,就是图片资源何时应该释放.因为随着GridView的滚动,加载的图片可能会越来越多,如果没有一种合理的机制对图片进行释放,那么当图片达到一定上限时,程序就必然
jquery广告无缝轮播实例

本文实例为大家演示了jquery广告无缝轮播效果,供大家参考,具体内容如下需要自行添加五张图片和引用jquery库纵向轮播实例: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery广告无缝轮播代码演示</title> <style type="t
js实现超酷的照片墙展示效果图附源码下载

这是一个超酷的照片墙展示效果,很多照片结合淡入淡出.旋转.缩放.倾斜及3D效果,照片快速从左侧切入,做旋转3D效果,最后在照片墙上整齐排列,为用户展示了超酷的照片墙展示效果. 查看演示下载源码 HTML 本文结合实例给大家分享超酷的照片墙效果,该效果依赖jQuery和easing插件,因此首先载入这两个文件. <script src="jquery.min.js"></script> <script src="jquery.easing.1.3
Android瀑布流照片墙实现体验不规则排列的美感

传统界面的布局方式总是行列分明.坐落有序的,这种布局已是司空见惯,在不知不觉中大家都已经对它产生了审美疲劳.这个时候瀑布流布局的出现,就给人带来了耳目一新的感觉,这种布局虽然看上去貌似毫无规律,但是却有一种说不上来的美感,以至于涌现出了大批的网站和应用纷纷使用这种新颖的布局来设计界面. 记得我在之前已经写过一篇关于如何在Android上实现照片墙功能的文章了,但那个时候是使用的GridView来进行布局的,这种布局方式只适用于"墙"上的每张图片大小都相同的情况,如果图片的大小参差不齐,

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

相关推荐

随机推荐