Example of jquery + html page flip album function (recommended)

Today, I am in a good mood. I will try again the album imitation function that is most advanced at the front end. This album is implemented on the case presentation page of a website. It is not written separately, has no time, and has poor reusability. It will be extracted separately after time. Before writing this album, I found some cases on the Internet, but I was dumb at first reading the code, so I did not want to study it, so I wrote it myself ..... the following figure shows how to implement this function. If you are in a good mood today, we will introduce the album imitation function that is best implemented at the front end.

This album is implemented on the case presentation page of a website. It is not written separately, has no time, and has poor reusability. It will be extracted separately after time,

Before I wrote this story, I found some cases on the Internet, but I was dumbly looking at the code, so I did not want to study it, so I wrote it myself .....

The following describes how to implement this function.

/* ---------------------- After clicking, all the pictures of the project to be loaded in the album will be displayed in a pop-up layer (small picture) --------------------------- */$ (function () {$ (". transparentp "). click (function (e) {var el = e. srcElement | e.tar get; var transparentBackViewArray = $ (". transparentp "); var AppTitleArray = $ (". appDetialTitleClass "); for (var I = 0; I <transparentBackViewArray. length; I ++) {var focusTransparentBackView = transparentBackViewArray [I]; if (el = focusTransparentBackView) {var pointTitle = AppTitleArray [I]; // query the description image to be loaded Based on the title. // transParentLawyer full screen masking layer $ ("# masterp "). after ('
 
')/*. TransParentLawyer {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #666666; opacity: 0.5; z-index: 2147000000 ;} */var addPxWidth = document.doc umentElement. clientWidth; var addPxHeight = document.doc umentElement. clientHeight; var blocks = 555; var alertBackpHeight = 525; var blocks = (addPxWidth-alertBackpWidth)/2; var blocks = (addPxHeight-alertBackpHeight)/2; var createLeft = large. toString () + 'px '; var createTop = alertBackStyleMarginTop. toString () + 'px '; var ProjectName = "APP"; var combindTable ="
"+ ProjectName +"
"CombindTable + ="

 
 
  
  
"; For (var I = 0; I <5; I ++) {combindTable + ="
  
  ";}// OverFlow-y: scroll; overFlow-x: scroll; combindTable + =' 
  
 
 
'$ (". TransParentLawyer"). after ('
'+ CombindTable +'
') Break;} // write the jquery method in the jquery method body that Concatenates the table label, and put it behind the splicing operation/* ----------- pop up the album to load image listening (why should we write it here? The above method has been executed (splice the tags we need to load, the tag to be operated. ----------------- */$ (". showPorjectAppImg "). click (function (e) {var imageArray = $ (". showPorjectAppImg "); var el = e. srcElement | e.tar get; // 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.doc umentElement. clientWidth; var addPxHeight = document.doc umentElement. clientHeight; var blocks = 320; var alertBackpHeight = 560; var blocks = (addPxWidth-alertBackpWidth)/2; var blocks = (addPxHeight-alertBackpHeight)/2; var createLeft = large. toString () + 'px '; var createTop = alertBackStyleMarginTop. toString () + 'px '; $ ("# masterp "). after ('
 
') // Src = "+'" '+ imagePath +' "'+"/> the pop-up image is spliced $ (". PhoneTeamrTransperantp"). after ('
'+ "" +'
') $ (". AppProjectPrevious "). click (function (e) {// Previous Page var imageArray = $ (". showPorjectAppImg "); var el = e. srcElement | e.tar get; 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.tar get; 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 );})})});});

The above is the details of the jquery + html page flip album function instance (recommended). For more information, see other related articles in the first PHP community!