VUE实现点击头像出现遮罩层的功能的两种方式
本文是为了解决点击头像,出现一个遮罩层,显示上传头像。先说一下思路,第一种是用动画的方式来移动位置,但是ie9不支持动画,ie8一下直接不支持位置移动。所以某就研究了第二种方式,就是利用相对位置的固定和display的是否显示来控制遮罩层,实现效果都差不多,个人推荐第二种,但是第一种有动画,对,就是那个高逼格的东西。直接上代码:第一种:<!DOCTYPE html><h...
本文是为了解决点击头像,出现一个遮罩层,显示上传头像。先说一下思路,第一种是用动画的方式来移动位置,但是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>
<body>
<a href="javascript:shield()">open</a>
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>
赠人玫瑰,手留余香。
更多推荐
所有评论(0)