vue实现图片3D旋转效果(点击一次停止，再次点击继续，双击图片放大，再次双击大图消失)

代码结构：（不是vue-cli搭建的）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X

Lucky铂爵

4263人浏览 · 2020-06-17 15:46:01

Lucky铂爵 · 2020-06-17 15:46:01 发布

代码结构：（不是vue-cli搭建的）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>

	<link rel="stylesheet" href="./demo.css">
	<script src="./js/vue.js"></script>

	<body>
		<div id="main" class="main" @mouseenter="mouseenter" @mouseleave="mouseleave" @click="click">
			<div class="box" ref='box'>
				<div v-for='(item,index) in 8' :key='index'>
					<img class='img' :src="'img/'+ Number(index+1) +'.jpg'" @dblclick="imgClick(index)">

				</div>
			</div>
			<div class="bigimg" v-if="isShow">
				<div @click.stop="">
					<img class='img' :src="'img/'+ Number(bigindex+1) +'.jpg'" @dblclick="bigImgClick">
				</div>
			</div>
		</div>
	</body>

	<script src="./demo.js"></script>

</html>

css:

html,
body {
	background-color: #000;
	width: 100%;
	height: 100%;
}

* {
	margin: 0;
	padding: 0;
}

.main {
	width: 100%;
	height: 100%;
	padding-top: 100px;
}

.box {
	width: 133px;
	height: 200px;
	margin: 0px auto;
	position: relative;
	transform-style: preserve-3d;
	transform: perspective(800px) rotateX(-15deg) rotateY(0deg);
}

.box img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	box-shadow: 0px 0px 5px #fff;
	-webkit-box-reflect: below 10px -webkit-linear-gradient(transparent, transparent 50%, rgba(0, 0, 0, .5));
}

.bigimg {
	position: fixed;
	left: 0;
	top: 50px;
	right: 0;
	bottom: 0;
	background-color: aquamarine;
	width: 600px;
	height: 800px;
	margin: 0 auto;
}

.bigimg img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

JS：

var app = new Vue({
	el: '#main',
	data: {
		oWrap: '',
		time: '',
		roY: 0,
		kg: true,
		isShow: false,
		bigindex: 0
	},
	mounted() {
		this.gitList()
	},
	methods: {
		gitList() {
			//1.获取元素
			let imgList = document.querySelectorAll('.img') //获取img数组
			let deg = 360 / imgList.length; //3.每个需要旋转的度数
			// 定义一个开始的度数
			let roX = -10;
			let roY = 0;
			let x, y, x_, y_, xN, yN, time = null;
			//2.遍历所有的img标签
			for (let i = 0; i < imgList.length; i++) {
				imgList[i].style.transform = 'rotateY(' + i * deg + 'deg) translateZ(350px)';
				imgList[i].style.transition = ' all 1s ' + (imgList.length - i - 1) * 0.1 + 's';
				//transition:设置过渡
				imgList[i].ondragstart = function() {
					return false;
				}
			}
		},
		//鼠标进入
		mouseenter() {
			clearInterval(this.time)
			this.run()
		},
		//鼠标离开
		mouseleave() {
			clearInterval(this.time);
		},
		//点击停止（开始）
		click() {
			this.kg = !this.kg
			if (this.kg) {
				this.mouseenter()
			} else {
				this.mouseleave()
			}
		},
		// 点击小图片
		imgClick(index) {
			this.isShow = true
			this.bigindex = index
			console.log(index);
		},
		// 点击大图片
		bigImgClick() {
			this.isShow = false
		},
		//封装计时器
		run() {
			let that = this
			that.oWrap = that.$refs.box
			that.time = setInterval(function() {
				that.roY -= 5 * 0.2;
				that.oWrap.style.transform = 'perspective(800px) rotateX(-10deg) rotateY(' + that.roY + 'deg)';
			}, 100)
		}
	}

})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^