溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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" >
<img class="bigimg" src="" />
</div>
<div id="content" >
<!-- <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如何實現照片墻自動播放特效”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
