H5前端_魔镜变换实例源码，CSS内联分析

本文链接：https://blog.csdn.net/Fend2019/article/details/118403606

前端CSS样式

- 镜子变换功能

镜子变换功能

下面展示一些 内联代码片。

// A code block

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
	<div class="bigbox">
		<template>
			<my></my>
			<my></my>
		</template>
	</div>
</body>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
	Vue.component('my',{
		template:`<div class="box1">
			<div class="up"><img :src="imga1"></div>
			<div class="bottom" @click='Random1'><img :src="imga2"></div>
		</div>`,

		data(){
			return {
				imga1:'./img/background1.jpg',
				imga2:'./img/1.jpg'
			}
		},
		methods:{
			Random1(){
			//创建一个数组随，抽取随机数图片
				var imgarr=['0','1','2','3','4','5','6'];
				var ran=Math.floor(Math.random()*imgarr.length);
				this.imga2='./img/'+ ran +'.jpg';			}
		}
	})
	new Vue({
		el:'.bigbox'
	}) 
</script>
</script>
</html> 
//这里主要是起到一个联动效果
![效果展示](https://img-blog.csdnimg.cn/20210702023826986.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlbmQyMDE5,size_16,color_FFFFFF,t_70#pic_center)