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 相关文章推荐
JavaScript中null与undefined分析
Jul 25 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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
PHP实现抓取HTTPS内容
2014/12/01 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
js转html实体的方法
2016/09/27 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
下载给定网页上图片的方法
2014/02/18 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
分享6个隐藏的python功能
2017/12/07 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python读写csv文件的方法
2019/08/13 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
python Tornado框架的使用示例
2020/10/19 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
2014年村委会工作总结
2014/11/24 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
Linux安装Docker详细教程
2022/07/07 Servers