H5圖片翻動效果

<style> * {margin: 0;padding: 0; }html, body, #app {width: 100%;height: 100%;overflow: hidden;position: relative; } img {width: 100%;height: 100%;display: block; } .page {position: absolute;width: 100%;height: 100%;perspective-origin: 50% 50%;transform-style: preserve-3d;transition: transform 0.5s linear;perspective:10000;-webkit-perspective:10000; }.page .up {width: 100%;height: 100%;position: absolute;transform: rotateX(0deg);backface-visibility:hidden; } .page .down {width: 100%;height: 100%;position: absolute;transform: rotateX(180deg);backface-visibility:hidden; } </style> <template><div><div class="page firstpage"><img :src="images[0]" alt=""></div><div class="page" v-for="(imageItem, index) in images.slice(0, -1)" :key="index"><div class="up"><img :src="imageItem"></div><div class="down"><img :src="images[index+1]"></div></div><div class="page lastpage"><img :src="images[images.length-1]" alt=""></div></div> </template><script>export default {name: 'app',props: {images: {required: true}},data() {return {cur: 0,startPoint: {x: 0,y: 0},stopPoint: {x: 0,y: 0},zIndex: 0,allPages: []}},mounted() {document.body.addEventListener("touchstart", this.touchStartMove, false);document.body.addEventListener("touchmove", this.touchMove, false);document.body.addEventListener("touchend", this.touchendMove, false);var upEles = document.getElementsByClassName("up");var downEles = document.getElementsByClassName("down");var allPages = document.getElementsByClassName("page");var clientHeight = document.body.clientHeight;var clientWidth = document.body.clientWidth;document.getElementsByClassName("firstpage")[0].style.clip = 'rect(0px '+clientWidth+"px "+clientHeight/2+"px "+'0)';document.getElementsByClassName("lastpage")[0].style.clip = 'rect('+clientHeight/2+"px "+clientWidth+"px "+clientHeight+"px "+'0)';for(var i=0;i<upEles.length;i++) {upEles[i].style.clip = 'rect('+clientHeight/2+"px "+clientWidth+"px "+clientHeight+"px "+'0)';downEles[i].style.clip = 'rect(0px '+clientWidth+"px "+clientHeight/2+"px "+'0)';}for(var i=allPages.length-1;i>=0;i--) {allPages[i].style.zIndex = allPages.length-i;}this.allPages = allPages;this.zIndex = allPages.length;},methods: {touchStartMove(e) {this.startPoint.x = e.changedTouches[0].pageX;this.startPoint.y = e.changedTouches[0].pageY;this.zIndex++;},touchMove(e) {var diffX = this.startPoint.x-e.changedTouches[0].pageX;var diffY = this.startPoint.y-e.changedTouches[0].pageY;if(diffY>0) {if(this.cur>=this.images.length-1) {return;}this.allPages[this.cur+1].style.zIndex = this.zIndex;this.allPages[(this.cur+1)].style.transform= "rotateX("+diffY/(window.screen.availHeight/2)*90+"deg)";} else {if(this.cur<=0) {return;}this.allPages[(this.cur)].style.zIndex = this.zIndex;this.allPages[(this.cur)].style.transform= "rotateX("+(180+diffY/(window.screen.availHeight/2)*90)+"deg)";}},touchendMove(e) {this.stopPoint.x = e.changedTouches[0].pageX;this.stopPoint.y = e.changedTouches[0].pageY;var diffX = this.startPoint.x-this.stopPoint.x;var diffY = this.startPoint.y-this.stopPoint.y;if(diffY>0) {if(this.cur>=this.images.length-1) {return;}//上滑動if(diffY>window.screen.availHeight/4) {this.allPages[(this.cur+1)].style.transform= "rotateX(180deg)";this.cur+=1;} else {this.allPages[(this.cur+1)].style.transform= "rotateX(0deg)";}} else if(diffY<0){//下滑if(this.cur<=0) {return;}if(Math.abs(diffY)>window.screen.availHeight/4) {this.allPages[(this.cur)].style.transform= "rotateX(0deg)";this.cur-=1;} else {this.allPages[(this.cur)].style.transform= "rotateX(180deg)";}}}},destroyed() {document.body.removeEventListener("touchstart", this.touchStartMove);document.body.removeEventListener("touchmove", this.touchMove);document.body.removeEventListener("touchend", this.touchendMove);} } </script>

http://h5.highsensor.cn/case/flip-page.mp4
感興趣的可以私聊我

總結(jié)

以上是生活随笔為你收集整理的H5 图片翻动效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。