VUE实现点击头像出现遮罩层的功能的两种方式

最新推荐文章于 2023-07-13 10:15:42 发布

梅子丨朱

最新推荐文章于 2023-07-13 10:15:42 发布

阅读量4.2k

点赞数 1

分类专栏： VUE

本文链接：https://blog.csdn.net/Mr_carry/article/details/100150116

版权

VUE 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文是为了解决点击头像，出现一个遮罩层，显示上传头像。先说一下思路，第一种是用动画的方式来移动位置，但是ie9不支持动画，ie8一下直接不支持位置移动。所以某就研究了第二种方式，就是利用相对位置的固定和display的是否显示来控制遮罩层，实现效果都差不多，个人推荐第二种，但是第一种有动画，对，就是那个高逼格的东西。直接上代码：

第一种：

<!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>
<style type="text/css">
.circle{
width: 100px;
height: 100px;
position: relative;//设定相对位置
overflow: hidden;//超出部分隐藏
}
.circle0{
width: 100px;
height: 100px;
background-color: red;
}
.circle1{
width: 100px;
height: 100px;
background-color: green;
opacity: 0.6;//遮罩层的透明度
transition: transform 1s ease;//动画，有点坑爹的是不支持ie9以下的版本，后面再研究一下有没有更好的办法
}
.circle:hover > .circle1 {
transform: translateY(-100%);//位置移动
}
</style>
</head>
<body>
<div id="app">
<div class="circle">
<div class="circle0"></div>
<div class="circle1"></div>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data(){
return{

}
},
methods: {

}
})
</script>

</body>
</html>

第二种，这个例子没用VUE，个人觉得主要是思路重要点，相信用得着的哥们也能在vue中轻松完成，要是真的有不会的，可以留个言啥的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全屏div</title>
<style>
#a{
width: 100px;
height: 100px;
background: #999999;
}
#b{
width: 100%;
height:100%;
background: red;
}
#c {
width:100%;
height:100%;
background-color:#000;
position:relative;//设定位置关系
left:0px;
top:-100px;
z-index:2;
opacity:0.3;
/*兼容IE8及以下版本浏览器*/
filter: alpha(opacity=30);
display:none;//控制显示不显示
}

</style>
<script>//这里用的是js，vue自己可以实现的，这里就不给出了，留一个悬念
function shield(){
var s = document.getElementById("c");
s.style.display = "block";
}
</script>
</head>

赠人玫瑰，手留余香。

梅子丨朱

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
VUE实现点击头像出现遮罩层的功能的两种方式

本文是为了解决点击头像，出现一个遮罩层，显示上传头像。先说一下思路，第一种是用动画的方式来移动位置，但是ie9不支持动画，ie8一下直接不支持位置移动。所以某就研究了第二种方式，就是利用相对位置的固定和display的是否显示来控制遮罩层，实现效果都差不多，个人推荐第二种，但是第一种有动画，对，就是那个高逼格的东西。直接上代码：第一种：<!DOCTYPE html><h...
复制链接

扫一扫