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

2024-08-07 05:23:31

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

实现是这个样子：

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

嗯，具体代码：

<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靠边悬浮球内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue实现仿iPhone悬浮球的示例代码

悬浮球插件简单的效果图: 很遗憾,没找到太好的视频转gif的软件,压缩出来的大小超过了限制,就不放图了可以参考其他人的图,效果一致: 简单实用案例:  <xuanfuqiu :position="position"> <d-add-button @click="addPigFarm" add-item="猪场"></d-add-b
Vue实现PC端靠边悬浮球的代码

我想把退出登录的按钮做成一个悬浮球的样子,带动画的那种. 实现是这个样子: 手边没有球形图.随便找一个,功能这里演示的为单机悬浮球注销登录嗯,具体代码: <div :class="['meun-switch animated flex-row',uploadflag ? 'active rubberBand off' : 'leave jello']" @mouseleave="uploadleave" @mouseenter="uploadent
Vue实现PC端分辨率自适应的示例代码

目录方案安装依赖引入依赖 px转换成rem 修改flexible.js 参考博客方案 lib-flexible+ px2remLoader lib-flexible:阿里可伸缩布局方案 px2rem-loader:px转rem 安装依赖 npm install px2rem-loader -D npm install lib-flexible -S 引入依赖 main.js引入lib-flexible import 'lib-flexible' px转换成rem vue-loader的o
vue实现PC端录音功能的实例代码

录音功能一般来说在移动端比较常见,但是在pc端也要实现按住说话的功能呢?项目需求:按住说话,时长不超过60秒,生成语音文件并上传,我这里用的是recorder.js 1.项目中新建一个recorder.js文件,内容如下,也可在百度上直接搜一个 // 兼容 window.URL = window.URL || window.webkitURL navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMed
vue实现PC端分辨率适配操作

依赖项目基础配置使用 vue-cli 生成自适应方案核心: 阿里可伸缩布局方案 lib-flexible px转rem:px2rem,它有webpack的loader px2rem 开始先使用vue脚手架初始化一个webpack项目 vue init webpack 项目名项目初始化好了之后,进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loader npm i lib-flexible -S npm i px2rem-loader -D 安装好了之
vue实现pc端拍照上传功能

本文实例为大家分享了vue实现pc端拍照上传功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF8"> </head> <body> <div id="contentHolder"> <video id="video" width="320" heigh
vue中PC端地址跳转移动端的操作方法

需求:pc端和移动端是两个独立的项目,两个项目项目中的内容基本相同,链接组合的方式都有规律可循,接到的需求便是在移动端访问pc端的URL连接时,重定向至移动端对应页面. 这个需求实现的方式比较明了,我的大致思路是在路由守卫处监听每个进来的路由请求,分析该请求是否是由移动端访问,若不是,则该路由请求直接放行:若是则分析要进入的路由路径,提取路径中的必要字段,组合称新的移动端链接即可. 里面涉及到了三个知识点:1.路由守卫,2.客户端判断.3.正则提取文字,接下来就分别按照这几点讲解一下,并附上整个
python+pywinauto+lackey实现PC端exe自动化的示例代码

欢迎阅读最近一年多一直在从事PC端exe的测试,也是趁着闲余时间,调研了下exe的自动化. 核心框架为python+pywinauto+lackey这样的一个组合方式本文以大家熟知的Tim为例子,实现打开exe,输入账号密码并且登录,搜索具体聊天对象,发送消息,并退出账号的一系列简单操作. 依然是从环境搭建开始,我会尽我所能,详细的去介绍每一步,让各位能看懂我每一步操作的目的和理由.只对代码感兴趣的,跳到文章最后即可. 框架介绍以python3为基础进行程序设计. pywinauto是基于
jquery实现的可隐藏重现的靠边悬浮层实例代码

本实例使用jquery操作div的CSS,实现了可隐藏重现的靠边悬浮层,预览效果网址:http://www.keleyi.com/keleyi/phtml/xuanfudiv/ 本实例使用到jquery添加移除类的两个方法,详细介绍请参考网址:http://www.keleyi.com/a/bjac/e9e40a974de5a902.htm 下面给出完整代码,保存到html文件可查看效果. 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
js如何判断用户是在PC端和还是移动端访问

最近一直在忙我们团队的项目"咖啡之翼",在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而且许多国内开发者也开始投身于Android移动终端的大浪潮中.如果很多互联网大浪潮你错过了.那么这个Android浪潮你绝对不能错过.目前我们为"咖啡之翼"已经开发了移动终端以及安卓客户端,大家使用Android或者IOS操作系统的手机,直接访问域名www.sygxy.cn即可观看移动终端效果.同时Android客户

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

相关推荐

随机推荐