原生js实现3D照片墙
生活随笔
收集整理的這篇文章主要介紹了
原生js实现3D照片墙
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
聊一下心得：CSS寫得好，真的可以省很多js代碼哈，寫起來也簡單很多，所以要好好掌握js哈，所以這里也提供了css代碼，如果您覺得您的css寫得不錯，可以直接看js代碼哦
效果：
1、點擊Start View進入照片墻
2、只有一張圖片是在中間顯示，其他圖片在中間的圖片兩側隨機排序，并且隨機旋轉一定的角度，層級也是隨機的哦
3、點擊上面的導航條，可以讓對應的圖片在中間顯示
4、點擊中間的圖片該照片翻轉，顯示背面（照片的描述信息）
實現過程：
1、用數據生成結構（模擬的數據，此處不再提供）
2、對所有圖片進行排序
3、計算兩側圖片的隨機范圍
4、控制圖片翻轉
5、控制導航按鈕切換圖片
6、遮罩層動畫實現
HTML代碼：
<body><div class="photo_wall"><div class="photo"><!-- 每張圖片的最外層，用來控制圖片的旋轉和位移 --><div class="photo_i front" id="photo_{{id}}"><!-- 內層用來控制圖片的3D翻轉 --><div class="photo_3d"><!-- 每個照片的正面 --><div class="photo_side photo_front"><p><img {{src}}="{{img}}"></p><h3>{{caption}}</h3></div><!-- 每個照片的反面 --><div class="photo_side photo_back"><p class="desc">{{desc}}</p></div></div></div>{{split}}<div class="nav"><span class="nav_i" id="nav_{{id}}"></span></div></div><div class="shade"><div class="start">Start View</div></div></div> </body>CSS代碼： /*最外層樣式*/ .photo_wall{width: 100%;height: 600px;position: relative;background: url(../imgs/bg.jpg) no-repeat center center;background-size: cover;overflow: hidden; }/*照片區域的樣式*/ .photo {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;opacity: 0;transition: 1s; }/*每個照片的樣式*/ .photo .photo_i,.photo .photo_3d,.photo .photo_side {width: 336px;height: 392px;position: absolute;left: 0;top: 0; }.photo .photo_i {transition: 800ms;perspective: 750px;left: 50%;top: 50%;transform: translate(-50%,-50%) scale(.5) rotate(0); }.photo .photo_3d {transition: 500ms;transform-style: preserve-3d;transform-origin: 0 50%; } /*正面和反面的公共樣式*/ .photo .photo_side {border-radius: 6px;background: #fff;padding: 26px 24px;box-sizing: border-box;backface-visibility: hidden; }/*照片的正面樣式*/ .photo .photo_front {transform: rotateY(0); } .photo .photo_front p {width: 286px;height: 286px;border: 2px solid #d8536d;overflow: hidden;display: flex;/*align-items: center;*/ } .photo .photo_front p img{width: 100%;align-self: center; } .photo .photo_front h3{width: 166px;height: 44px;background: #d8536d;border-radius: 0 0 6px 6px;margin: 0 auto;text-align: center;font: 16px/44px Arial;color: #fff; } /*照片的反面樣式*/ .photo .photo_back {transform: rotateY(-180deg); }.photo .photo_back .desc {font-size: 14px;line-height: 20px;color: #d8536d; } .photo .photo_back a {color: #d8356d; } /*照片的居中樣式*/ .photo .center {z-index: 9999;left: 50%;top: 50%;transform: translate(-50%,-50%) scale(1) rotate(0); }/*照片正面的class*/ .photo .front .photo_3d {transform: translateX(0) rotateY(0); } /*照片反面的calss*/ .photo .back .photo_3d {transform: translateX(100%) rotateY(-180deg); }/*導航欄的樣式*/ .nav {position: absolute;left: 0;top: 0;z-index: 888;width: 100%;height: 200px;padding-top: 10px;box-sizing: border-box;text-align: center;background: -webkit-linear-gradient(top,rgba(0,0,0,.5),transparent); }@font-face {font-family: "icont";src: url(../font/iconfont.woff) format("woff"); }.nav .nav_i {display: inline-block;width: 30px;height: 30px;border-radius: 50%;background: rgba(255,255,255,.5);font-family: "icont";text-align: center;line-height: 30px;color: rgba(255,255,255,0);cursor: pointer;transform: scale(.5);transition: 500ms; }.nav .active {color: rgba(255,255,255,1);transform: scale(.9) rotateY(0); }.nav .back {transform: scale(.8) rotateY(-180deg); }/*遮罩層*/ .photo_wall .shade {position: absolute;left: 0;top: 0;z-index: 2;width: 100%;height: 100%;background: rgba(255,255,255,.7);display: flex;justify-content: center;align-items: center; } .photo_wall .hide {transition: 1s;opacity: 0;transform: scale(0) rotateY(360deg); } .photo_wall .shade .start {width: 200px;height: 60px;border: 2px solid #d8536d;border-radius: 10px;background: rgba(248,229,227,.5);text-align: center;font: 22px/60px Arial;cursor: pointer; }js代碼：用到了我昨天在博客上寫的工具函數：https://blog.csdn.net/lhjuejiang/article/details/80896428
提供主要的實現步驟的js代碼：
(function () {//--------------------------------------------------------- // 初始化數據var data = dataList,len = data.length;createPhotos(data);var n = 0;//--------------------------------------------------------- // 基本邏輯M('.shade .start').addEventListener('click',function() {addClass(M('.shade'),'hide');M('.photo').style.opacity = 1;addClass(M(`#photo_0`),'center');setTimeout(function(){sortImgs(n);}, 200);});M('.nav_i').forEach((item,i)=>{item.onclick = function(){turnImg(M(`#photo_${i}`));};});//--------------------------------------------------------- // 需求函數化// 需求1：利用數據生成所有html結構function createPhotos(data) {var photo_html = M('.photo').innerHTML.split('{{split}}')[0].trim(),nav_html = M('.nav').innerHTML.trim();var photos = [],nav = [];data.forEach((item,i)=>{var photoTemp = photo_html.replace(/{{id}}/,i).replace(/{{src}}/,'src').replace(/{{img}}/,item.img).replace(/{{caption}}/,item.caption).replace(/{{desc}}/,item.desc),navTemp = nav_html.replace(/{{id}}/,i);photos.push(photoTemp);nav.push(navTemp);});photos.push(`<div class="nav">${nav.join('')}</div>`);M('.photo').innerHTML = photos.join('');}// 需求2:給所有的圖片排序function sortImgs(n) {var photos = M('.photo_i');initPhotos(photos);var center = photos.splice(n,1)[0];addClass(center,'center');addClass(M(`#nav_${n}`),'active');// center.addEventListener('click', function(e){// turnImg(this);// });center.onclick = function () {turnImg(this);};// 對剩余的圖片進行隨機排序photos.sort(()=>{return 0.5 - Math.random();})var rP = scope(); //返回左右兩側范圍 從 x - y// 分成左側和右側兩部分var left = photos.splice(0,Math.ceil((len-1)/2)),right = photos;left.forEach((item,i)=>{item.style.zIndex = rn([0,len]);item.style.left = rn(rP.L.x) + 'px';item.style.top = rn(rP.L.y) + 'px';item.style.transform = `translate(0,0) scale(.9) rotate(${rn([-2160,2160])}deg)`;});right.forEach((item,i)=>{item.style.zIndex = rn([0,len]);item.style.left = rn(rP.R.x) + 'px';item.style.top = rn(rP.R.y) + 'px';item.style.transform = `translate(0,0) scale(.9) rotate(${rn([-2160,2160])}deg)`;});}// 需求3 編寫某個區間的隨機整數function rn(arr) {var max = Math.max.apply(null,arr),min = Math.min.apply(null,arr);var p = Math.round(Math.random() * (max - min) + min);//?;return p;}// 需求4 計算隨機的范圍function scope() {var outer = M('.photo_wall');var pic = M(`#photo_${rn([0,len-1])}`);var W = outer.clientWidth,H = outer.clientHeight,w = pic.offsetWidth,h = pic.offsetHeight;console.log(W,w);var data = {L:{x:[-w/3,W/2 - w/2 - w],y:[-h/3,H - h*2/3]},R:{x:[W/2 + w/2,W - w*2/3],y:[-h/3,H - h*2/3]}}return data;}// 需求5：控制圖片翻轉function turnImg(ele) {var cur = ele.id.split('_')[1];var nav = M(`#nav_${cur}`);if(!hasClass(ele,'center')){ //如果點的不是當前對應的按鈕就重新排序return sortImgs(cur)}if(hasClass(ele,'front')){//翻轉到背面console.log('現在是正面準備移除front');addClass(ele,'back');console.log(ele.className);rmClass(ele,'front');console.log(ele.className);addClass(nav,'back');}else{//翻轉到正面console.log('現在是反面準備移除back');addClass(ele,'front');console.log(ele.className);rmClass(ele,'back');console.log(ele.className);rmClass(nav,'back')}}// 需求6 初始化所有樣式function initPhotos(objs) {objs.forEach((item,i)=>{if(hasClass(item,'center')){var nav = M(`#nav_${i}`);rmClass(item,'center');rmClass(item,'back');addClass(item,'front');rmClass(nav,'active');rmClass(nav,'back');item.onclick = null;}item.style.left = '';item.style.top = '';item.style.zIndex = '';item.style.transform = `translate(-50%,-50%) scale(1.1) rotate(0deg)`;});}})()總結
以上是生活随笔為你收集整理的原生js实现3D照片墙的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机辅助药物设计试题,计算机辅助药物设
- 下一篇： 老工程师12个入门级忠告，新手老鸟都值得