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

最新推荐文章于 2024-08-31 17:29:32 发布

原创最新推荐文章于 2024-08-31 17:29:32 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #html #html5 #css3

前端技术专栏收录该内容

5 篇文章

订阅专栏

该博客展示了如何在前端开发中利用Vue.js组件和CSS样式实现一个动态的镜子变换功能。通过创建一个名为'my'的Vue组件，包含一个上部分（up）和下部分（bottom），并结合图片切换功能，当点击下部分时，可以随机更换图片。博客还附带了一个效果展示的截图。

前端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)