TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue中js让悬浮菜单div循环上下移动
1097
人阅读
2020/7/28 17:57
总访问:
3969016
评论:
0
收藏:
0
手机
分类:
前端
<img src="https://img.tnblog.net/arcimg/aojiancc2/d7508ebb427e4c449a0389eddd2b5709.gif" width="150px"> ### 封装的方法: ``` runEle() { const thisTemp = this const suspendmenuentrydiv = document.getElementById('suspendmenuentrydiv') const initValue = 66 // 初始化一个不然好像获取不到 suspendmenuentrydiv.style.bottom = initValue + 'px' let flag = true // 切换条件 const num = 50 // 加到最大值 let start = 0 // 起始值 let isMove = true // 鼠标放上去就停止移动 suspendmenuentrydiv.onmouseover = function() { isMove = false } // 鼠标移出就继续移动 suspendmenuentrydiv.onmouseout = function() { isMove = true // 移出的时候把菜单设置为关闭 // thisTemp.isShow = false } suspendmenuentrydiv.onmouseleave = function() { isMove = true // thisTemp.isShow = false } setInterval(function() { if (isMove) { if (flag) { start = start + 1 if (start === num) { flag = false } } else { start = start - 1 if (start === 0) { flag = true } } // 移出中把菜单设置为关闭试试 thisTemp.isShow = false suspendmenuentrydiv.style.bottom = (initValue + start) + 'px' } }, 90) } ``` 使用的时候调用一下方法即可 ``` mounted() { this.runEle() } ``` ### 完整的代码,贴一下 ``` <!-- 悬浮菜单的统一入口 --> <template> <div> <!-- 悬浮菜单开始 --> <div v-drag id="suspendmenuentrydiv" class="realTranslationInfos"> <div class="RealtranslationBox"> <el-collapse-transition> <div v-show="isShow"> <div style="margin-top: 12px;text-align: center;"> <img draggable="false" src="@/assets/imgs/chat/xiaozu.png" alt="" width="56px" height="56px" @click="openChatMain()" > <div> 小足学习助手 </div> </div> <div style="margin-top: 10px;text-align: center;margin-bottom: 10px;"> <img draggable="false" src="@/assets/imgs/chat/feedback2.png" alt="" width="56px" height="56px" @click="openFeedbackDialog()" > <div> 用户反馈 </div> </div> </div> </el-collapse-transition> <!-- src="@/assets/imgs/chat/entrygif.gif" --> <div style="height:66px;text-align: center;"> <img draggable="false" src="@/assets/imgs/chat/entry.png" alt="" width="66px" height="66px" @click="showMneu()"> </div> </div> </div> <!-- 悬浮菜单结束 --> <!-- 封装的弹窗组件 --> <FeedbackDialog ref="feedbackDialog" data-from-type="allin" /> </div> </template> <script> import FeedbackDialog from '@/pages/feedback/feedbackDialog.vue' // collapse 展开折叠 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition' import Vue from 'vue' Vue.component(CollapseTransition.name, CollapseTransition) export default { // 组件名字 name: 'FeedBack', components: { FeedbackDialog }, // 组件参数 props: { id: { type: String, default: '' }, dataFromType: { type: [Number, String], default: 'allin' } }, data() { return { isShow: false, // 用来给自己封装的弹窗组件传递参数 dialogVisible: false } }, mounted() { this.runEle() }, // 组件方法 methods: { runEle() { const thisTemp = this const suspendmenuentrydiv = document.getElementById('suspendmenuentrydiv') const initValue = 66 // 初始化一个不然好像获取不到 suspendmenuentrydiv.style.bottom = initValue + 'px' let flag = true // 切换条件 const num = 50 // 加到最大值 let start = 0 // 起始值 let isMove = true // 鼠标放上去就停止移动 suspendmenuentrydiv.onmouseover = function() { isMove = false } // 鼠标移出就继续移动 suspendmenuentrydiv.onmouseout = function() { isMove = true // 移出的时候把菜单设置为关闭 // thisTemp.isShow = false } suspendmenuentrydiv.onmouseleave = function() { isMove = true // thisTemp.isShow = false } setInterval(function() { if (isMove) { if (flag) { start = start + 1 if (start === num) { flag = false } } else { start = start - 1 if (start === 0) { flag = true } } // 移出中把菜单设置为关闭试试 thisTemp.isShow = false suspendmenuentrydiv.style.bottom = (initValue + start) + 'px' } }, 90) }, openFeedbackDialog() { // 调用子组件的方法打开弹窗 this.$refs.feedbackDialog.openFeedbackDialog(this.dataFromType) }, showMneu() { this.isShow = !this.isShow }, openChatMain() { const page = this.$router.resolve({ name: 'chatmain' // 这里是跳转页面的name }) // console.log(page.href) window.open(page.href, '_blank') // 打开新的页面 } } } </script> <style scoped="scoped" lang="scss"> .realTranslationInfos { width: 60px; height: 60px; // background: red; position: fixed; // position: absolute; bottom: 66px; right: 23px; width:80px; // bottom: 122px; // right: -30px; .translationContent { min-height: 100px; line-height: 23px; width: 338px; padding: 18px 74px 19px 19px; background: #004CB3; opacity: 0.80; border-radius: 12px; color: #fff; position: fixed; // position: absolute; right: 58px; bottom: 22px; z-index: 99999; } .RealtranslationBox { // display: flex; align-items: center; position: absolute; right: 2px; bottom: 5px; z-index: 99999; background: #E7F4FF; border-radius: 37px; img { cursor: pointer; } } } </style> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}