Vue实现PC端靠边悬浮球的代码


Posted in Javascript onMay 09, 2020

我想把退出登录的按钮做成一个悬浮球的样子,带动画的那种。

实现是这个样子:

手边没有球形图。随便找一个,功能这里演示的为单机悬浮球注销登录

Vue实现PC端靠边悬浮球的代码

Vue实现PC端靠边悬浮球的代码

嗯,具体代码:

<div
       :class="['meun-switch animated flex-row',uploadflag ? 'active rubberBand off' : 'leave jello']"
       @mouseleave="uploadleave"
       @mouseenter="uploadenter"
       v-if="uploadShow"
       @click.stop="logout"
     >
      <img :src="require('@/assets/1.png')"/>
     </div>

data

uploadShow: false,
    uploadflag: true,

js方法

uploadenter() {
    this.uploadflag = true;
   },
   uploadleave() {
    this.uploadflag = false;

   },
   uploadanimated() {
    setTimeout(() => {
     this.uploadShow = true;
     setTimeout(() => {
      this.uploadleave();
     }, 1000);
    }, 1000);
   },

css

.off{
  -webkit-animation:1s seconddiv;
  background: transparent;
 }

 @keyframes seconddiv{
  0% {transform: scale(1.4,1.4);}
  10% {transform: scale(1,1);}
  25% {transform: scale(1.2,1.2);}
  50% {transform: scale(1,1);}
  70% {transform: scale(1.2,1.2);}
  100% {transform: scale(1,1);}
 }
 .meun-switch {
  position: fixed;
  top: 90px;
  left: 0px;
  z-index: 2001;
  cursor: pointer;
  width: 150px;
  height: 150px;
  padding: 5px;
  transition: all 0.25s;

  &.leave {
   left: -65px;
  }

  &.active {
   left: 0;
  }

  &:hover {
   transform: scale(1.02);
  }

  img {
   width: 120px;
   height: 120px;
  }
 }

总结

到此这篇关于Vue实现PC端靠边悬浮球的代码的文章就介绍到这了,更多相关Vue靠边悬浮球内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 页面 Mask实现代码
Jan 09 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 #Javascript
基于JavaScript实现表格隔行换色
May 08 #Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 #Javascript
基于JQuery实现页面定时弹出广告
May 08 #jQuery
使用vue cli4.x搭建vue项目的过程详解
May 08 #Javascript
JQuery复选框全选效果如何实现
May 08 #jQuery
JQuery省市联动效果实现过程详解
May 08 #jQuery
You might like
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
用jquery来定位
2007/02/20 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
python动态监控日志内容的示例
2014/02/16 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
python 获取网页编码方式实现代码
2017/03/11 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
python实现简单http服务器功能
2018/09/17 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
工作会议主持词
2014/03/17 职场文书
环保倡议书400字
2014/05/15 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
冰峪沟导游词
2015/02/09 职场文书
保送生自荐信范文
2015/03/26 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书