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

本文是为了解决点击头像，出现一个遮罩层，显示上传头像。先说一下思路，第一种是用动画的方式来移动位置，但是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>

赠人玫瑰，手留余香。

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

vue 在线编辑excel表格（原生和使用组件的两种方式）
vue 在线编辑excel表格(原生和使用组件的两种方式) top表头和left表头格式的表格 <template><div>& ...
DAO层使用泛型的两种方式
1.DAO层使用泛型类,主要是定义一些通用的增删改查,然后其他DAO的类都来继承该类,通过构造方法将class对象传给该泛型类定义泛型接口 package sanitation.dao; impor ...
vue项目在浏览器嵌入wps进行操作，这里记录两种方式，本地载入这个能匹配内网使用
先整几个参考文档: wps开放平台开发文档: https://www.kdocs.cn/l/cmd0fQ9SjcsS https://www.kdocs.cn/l/cvItn7DFoX99 http ...
Android点击图片随机,android 设置图片随机出现-两种方式
android 设置图片随机出现-两种方式, 第一种方式:得到图片对应的Drawable实例,通过setImageDrawable(drawable)实现 //ImageView对应的id ivBg ...
html注释图案,jQuery图片点击弹出遮罩层标记注释特效
这是一款简单的.非常实用的jQuery图片点击弹出遮罩层标记注释特效. HTML html结构非常简单.使用一个portfolio作为wrapper,在里面可以添加多个portfolio_item. ...
Vue系列vue-router的参数传递的两种方式（五）
Vue系列vue-router的参数传递的两种方式前言一.编写Profile页面二.编写App.vue入口三.路由配置,index.js 四.对比route.params方式传参五.项目中 ...
vue实现打印功能的两种方法/web打印控件
第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入安装好以后在main.js文件中引入 1 2 import Print fro ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
ajax加载vue数据,详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 demo {{message }} 测试jqu ...

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

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

最新文章

热门文章