jQuery如何實(shí)現(xiàn)照片墻自動(dòng)播放特效-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)jQuery如何實(shí)現(xiàn)照片墻自動(dòng)播放特效，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司是一家專注于成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),富縣網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:富縣等地區(qū)。富縣做網(wǎng)站價(jià)格咨詢:18980820575

一個(gè)動(dòng)態(tài)展示圖片的頁面：

功能：定時(shí)從后臺(tái)取數(shù)據(jù)，進(jìn)行頁面圖片追加。對已經(jīng)在頁面中的圖片，進(jìn)行放大縮小動(dòng)畫展示。目前我們用于微信新關(guān)注用戶頭像展示。

<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>抽獎(jiǎng)</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://網(wǎng)址"; 
  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如何實(shí)現(xiàn)照片墻自動(dòng)播放特效

關(guān)于“jQuery如何實(shí)現(xiàn)照片墻自動(dòng)播放特效”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文名稱：jQuery如何實(shí)現(xiàn)照片墻自動(dòng)播放特效-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://muchs.cn/article32/dhgspc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、響應(yīng)式網(wǎng)站、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容