H5 图片翻动效果

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
感兴趣的可以私聊我