jquery+html仿翻頁相冊功能

更新時間：2016年12月20日 14:57:45 作者：L-H

這篇文章主要為大家詳細介紹了jquery+html仿翻頁相冊功能，前端實現(xiàn)的相冊模仿功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

今天心情大好，再發(fā)一篇最進前端實現(xiàn)的相冊模仿功能。

這個相冊是在一個網(wǎng)站的案例展示頁面上實現(xiàn)的，沒單獨寫出來，沒時間，重用性也很差，以后有時間了再單獨提取出來，

寫這個玩意前，我在網(wǎng)上找了一些案例，但是一看代碼都比較傻眼，固不想去研究，所以自己寫了.....

下面是實現(xiàn)這個功能的截圖

如果你是一個前端，這個功能對你來說除了邏輯復(fù)雜點，其他的可能實現(xiàn)起都比較簡單，我不是做前端的，所以前端HTML這塊遇到了一些問題。下面我會將我遇到的這些問題的解決方法分享出來。

首先說下:postion這個屬性以前我要用一般是用這個屬性值一般是absolute和relative相對定位和絕對定位，但是相對用得都比較少，如果你是前端你應(yīng)該知道，多數(shù)用的是Margin-.....Padding-......，這次用到了postion的fixed:他被用在我的彈出層背景層里面，當(dāng)然用absolute和relative也可以，但是實踐證明fixed在彈出層遮罩中使用更加精準(zhǔn)合理。為什么我知道勒，這個是由于中途出現(xiàn)的一個BUG后被我發(fā)現(xiàn)的..關(guān)于BUG我這里就不談了，反正你記彈出層背景定位時用POSTION的fixed就對了。(下面是css樣式表代碼:)

/*相冊背景層 PhoneTeamrTransperantDiv這個是DIV，他的父節(jié)點是BODY,在不使用時你需要設(shè)置他的display:none*/
.PhoneTeamrTransperantDiv{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color:black; opacity: 0.7; z-index: 2147000002;}

接著說下:拼接table表單, 呵呵關(guān)于這種玩法，做PHP的比較多,ASP.NET的是比較少的，因為ASP.NET有相應(yīng)的控件，我現(xiàn)在雖然在ASP.NET的開發(fā)工具平臺下開發(fā)網(wǎng)站，但是

我已經(jīng)多久沒使用過拖控件的方式了。。。一般都是ASP.NET頁面+HTML+AJAX做網(wǎng)站。關(guān)于這個拼接table中所遇被我解決的問題，是我1-2年前做網(wǎng)站沒解決的，這次被我解決了呵呵，這個問題就是使用jquery來操作拼接中的標(biāo)簽，上次沒解決我使用了javascript方法代替。這次MD標(biāo)簽多了，我是死了心要用jquery，沒想到，功夫不負有心人，這問題就這樣被我給解決了。解決方法:將操作拼接table標(biāo)簽的juqery方法寫在拼接table標(biāo)簽方法的的內(nèi)部(下面我貼代碼):

/*------------------------點擊后將相冊需要加載的這個項目的所有圖片展示到一個彈出層中（小圖片)---------------------------------*/
   $(function () {
   $(".transparentDiv").click(function (e) {
   
    var el = e.srcElement || e.target;
 
    var transparentBackViewArray = $(".transparentDiv");
    var AppTitleArray = $(".appDetialTitleClass");
 
 
    for (var i = 0; i < transparentBackViewArray.length; i++) {
     var focusTransparentBackView = transparentBackViewArray[i];
     if (el == focusTransparentBackView) {
      var pointTitle = AppTitleArray[i];//根據(jù)title去查詢需要加載的說明圖片
 
      //transParentLawyer全屏幕遮蔽層
      $("#masterDiv").after('<div class="transParentLawyer" onclick=' + "closeAllCorver()" + ' style="display:block"> </div>')
      /* .transParentLawyer{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #666666; opacity: 0.5; z-index: 2147000000;}*/
 
 
      var addPxWidth = document.documentElement.clientWidth;
      var addPxHeight = document.documentElement.clientHeight;
 
      var alertBackDivWidth = 555;
      var alertBackDivHeight = 525;
 
      var alertBackStyleMarginLeft = (addPxWidth - alertBackDivWidth) / 2;
      var alertBackStyleMarginTop = (addPxHeight - alertBackDivHeight) / 2;
 
 
      var createLeft = alertBackStyleMarginLeft.toString() + 'px';
      var createTop = alertBackStyleMarginTop.toString() + 'px';
      var ProjectName = "捉大毛APP";
      var combindTable = "<div id='contentShowAppProjectImageDiv' style=' width:100%;height:30px;background:#dcdcdc; margin-top:5px;border-bottom:1px solid #b3b3b3;'><h3 style='text-align:center;color:#666666'>" + ProjectName + "</h3><a class='clsBtn' onclick=" + "closeAllCorver()" + "></a> </div>"
 
      combindTable += "<div id='showAppImageContainerView' style='overFlow-y:scroll;overFlow-x:scroll;margin-top:0px; width:100%;height:495px;background:#dcdcdc;'><table id='showProjectDetailTable' cellspacing='0'>";
      for (var i = 0; i < 5; i++) {
 
       combindTable += "<tr><td><div class='showProjectDetailBackImageDivForImgApp'><img class='showPorjectAppImg' src='../Source/webSite.jpg'/></div></td><td><div class='showProjectDetailBackImageDivForImgApp'><img class='showPorjectAppImg' src='../Source/phoneAppBackPanel1.jpg'/></div></td><td><div class='showProjectDetailBackImageDivForImgApp'><img class='showPorjectAppImg' src='../Source/phoneAppBackPanel1.jpg'/></div></td><td><div class='showProjectDetailBackImageDivForImgApp'><img class='showPorjectAppImg' src='../Source/phoneAppBackPanel1.jpg'/></div></td><td><div class='showProjectDetailBackImageDivForImgApp'><img class='showPorjectAppImg' src='../Source/phoneAppBackPanel1.jpg'/></div></td></tr>";
      }
 
      //overFlow-y:scroll;overFlow-x:scroll;
 
      combindTable += '<table/></div>'
 
      $(".transParentLawyer").after('<div class="imageContentLawyer" style=" position: fixed; width: 555px; height:525px; background-color: white; z-index: 2147000001; display:block;top:' + createTop + ';left:' + createLeft + ';border-radius: 5px;background:#dcdcdc;">' + combindTable + ' </div>')
 
 
 
      break;
     }
 
 
    }//將jquery方法寫在拼接table標(biāo)簽的jquery方法體內(nèi)，而且要放在拼接操作的后面
 
    /*-----------彈出相冊加載圖片監(jiān)聽(為什么寫在這里勒應(yīng)為，我們上面的方法執(zhí)行了完畢了（將我們需要加載的標(biāo)簽拼接好，才有我們需要操作的標(biāo)簽，-------------------*          /
    $(".showPorjectAppImg").click(function(e)
    {
 
     
     var imageArray = $(".showPorjectAppImg");
    var el = e.srcElement || e.target;
     //相冊遮罩層
    var imagePath;
     for (var i = 0; i < imageArray.length; i++)
     {
      var obj = imageArray[i];
      if(el==obj)
      {
       currentAlbumIndex = i;
       imagePath = obj.src;
       break;
      }
     }
    
     var addPxWidth = document.documentElement.clientWidth;
     var addPxHeight = document.documentElement.clientHeight;
 
     var alertBackDivWidth = 320;
     var alertBackDivHeight = 560;
 
     var alertBackStyleMarginLeft = (addPxWidth - alertBackDivWidth) / 2;
     var alertBackStyleMarginTop = (addPxHeight - alertBackDivHeight) / 2;
 
 
     var createLeft = alertBackStyleMarginLeft.toString() + 'px';
     var createTop = alertBackStyleMarginTop.toString() + 'px';
 
     $("#masterDiv").after('<div class="PhoneTeamrTransperantDiv" style="display:block"> </div>')
     //src="+'"'+ imagePath +'"'+"/> 呵呵拼接的彈出圖片
     $(".PhoneTeamrTransperantDiv").after('<div class="albumShowImageDiv" style="box-shadow: -20px 20px 20px rgba(0, 0, 0, 0.3); position: fixed; width: 320px; height:560px; background-color: white;display:block; z-index: 2147000003; display:block;top:' + createTop + ';left:' + createLeft + ';border-radius: 5px;background:#dcdcdc;"> ' + "<img id='rollAblumImage' align='absmiddle' width='312' height='552' style='padding-left:4px;padding-top:4px;' src="+'"'+ imagePath +'"'+"/>" + '<a class="appProjectPrevious"></a><a class="appProjectNext"></a><a class="appProjectCloseAlbum" onclick=' + "closeAlbumAllCorver()" + '></a> </div>')
 
 
     $(".appProjectPrevious").click(function (e) {//上一頁
 
      var imageArray = $(".showPorjectAppImg");
      var el = e.srcElement || e.target;
      var imagePath;
      if (currentAlbumIndex > 0)
      {
       currentAlbumIndex = currentAlbumIndex + 1;
      }
      else {
       currentAlbumIndex = imageArray.length - 1;
      }
      var obj = imageArray[currentAlbumIndex];
      imagePath = "http://localhost:59047/Source/phoneAppBackPanel.jpg";//obj.src;
      
      // $("#rollAblumImage").attr("src", imagePath);
      $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow", null, function () {
       $("#rollAblumImage").attr("src", imagePath);
       $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow");
 
       //var image = $("#rollAblumImage");
       
      // resizeimg(image, 320, 560);
      });
     })
     $(".appProjectNext").click(function (e)
     {
     // alert("adad");
      var imageArray = $(".showPorjectAppImg");
      var el = e.srcElement || e.target;
      var imagePath;
      if (currentAlbumIndex < imageArray.length-1) {
       currentAlbumIndex = currentAlbumIndex + 1;
      }
      else {
       currentAlbumIndex = 0;
      }
      var obj = imageArray[currentAlbumIndex];
      imagePath = "http://localhost:59047/Source/phoneAppBackPanel.jpg";
 
      $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow", null, function () {
       $("#rollAblumImage").attr("src", imagePath);
       $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow");
      });
     // $("#rollAblumImage").attr("src", imagePath);
     })
 
    })
 
 
   });
 
  });

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: