jQuery自动播放的照片墙特效

最新推荐文章于 2021-12-26 16:18:12 发布

maskice

最新推荐文章于 2021-12-26 16:18:12 发布

阅读量1.3k

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/maskice/article/details/54378661

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

参考：http://sc.chinaz.com/jiaoben/150301285320.htm

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

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

<!DOCTYPE html>
<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>

int maxId = Integer.parseInt(request.getParameter("maxId").trim());
				int limit = Integer.parseInt(request.getParameter("limit").trim());
				int isBegin = Integer.parseInt(request.getParameter("isBegin").trim());
				String time = "";
				SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
				if(isBegin==1)
					time = sdf.format(new Date());
				List<Map<String,String>> list = DrawService.getInstance().getMessageList(time,maxId,limit);
				if(list!=null && list.size()>0){
					jsonRes.put("list", list);
					jsonRes.put("code", 200);
				}else{
					jsonRes.put("code", 400);
				}

String sql = "SELECT u.id,u.headImg from bid_user u where isSubscribe=1 and id>"+maxId;
		if(!time.equals(""))
			sql+=" and createtime >= '"+time+"'";
		sql+=" order by id Limit 0,"+limit;

按钮样式：

<div style="position:fixed;bottom: 10px;text-align: center;width: 100%;">
	<button type="button" οnclick="loadUser()" id="begin" style=" background: -webkit-linear-gradient(#9ffd9f,#00ff00);width:90px;height:30px;border-radius:5px;color:#ffffff;font-size:15px;">开始</button>
	<button type="button" οnclick="luckUser()" id="draw" style=" background: -webkit-linear-gradient(#4fc1f5,#0796d6);width:90px;height:30px;border-radius:5px;color:#ffffff;font-size:15px;">抽奖</button>
</div>

界面截图：

maskice

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery自动播放的照片墙特效

参考：http://sc.chinaz.com/jiaoben/150301285320.htm一个动态展示图片的页面：功能：定时从后台取数据，进行页面图片追加。对已经在页面中的图片，进行放大缩小动画展示。目前我们用于微信新关注用户头像展示。抽奖 body{ background-color:#000; text-
复制链接

扫一扫