vue顶部悬停效果,vue实现弹出悬浮页面

　　这篇文章主要为大家详细介绍了某视频剪辑软件实现悬浮球效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件实现悬浮球效果的具体代码，供大家参考，具体内容如下

　　小球效果

　　小球移动效果图源码

　　模板

　　过渡

　　差异

　　ref=呼吸灯

　　"呼吸灯"

　　@click=onclick()

　　@触摸开始。stop= handleTouchStart

　　@触摸移动。预防。stop= handleTouchMove($ event)

　　@touchend.stop=handleTouchEnd

　　:style={left: left px ，top: top px ，width: itemWidth px ，height: itemHeight px}

　　v-text=text

　　v-if=isShow

　　{{text}}/div

　　/过渡

　　/模板

　　脚本

　　导出默认值{

　　道具：{

　　//球名字默认："球"

　　文本：{

　　类型：字符串，

　　默认："球"

　　//球宽度默认："40"

　　项目宽度：{

　　类型：数量，

　　默认值：40

　　//球高度默认："40"

　　项目高度：{

　　类型：数量，

　　默认值：40

　　}

　　data() {

　　返回{

　　左：0,//距离左边距离

　　top: 0，//距离抬头距离

　　startToMove: false，//开始移动时候不显示

　　isShow: true，//组件是否显示

　　计时器：空，//定时器

　　currentTop: null，//获取当前页面的滚动条纵坐标位置

　　clientW:文档。documentelement。客户端宽度，//视口宽

　　文件。documentelement。客户身高//视口高

　　};

　　已创建(){

　　//初始化定义距离四周距离

　　这个。左=这个。clientw-这个。项目宽度-30；

　　这个。top=这个。clienth/2-这个。项目高度/2；

　　方法：{

　　//点击小球事件

　　onclick() {

　　console.log(我是小云);

　　//开始移动方法

　　handleTouchStart() {

　　this.startToMove=true

　　这个参考文献。呼吸_灯。风格。transition=“none”；

　　//移动中方法

　　handleTouchMove(e) {

　　const clientX=e .目标接触[0].clientX//手指相对视口的x

　　const clientY=e . target touches[0]。客户关系；//手指相对视口的y

　　const isInScreen=

　　clientX=this.clientW

　　clientX=0

　　clientY=this.clientH

　　clientY=0；

　　如果(这个。开始移动接触目标。长度===1){

　　如果（是屏幕){

　　这个。left=clientX-this。项目宽度/2；

　　这个。top=clientY-this。项目高度/2；

　　}

　　//移动结束方法

　　handleTouchEnd() {

　　if (this.left this.clientW/2) {

　　this.left=30//不让贴边所以设置30没设置0

　　这个。handleicony()；

　　}否则{

　　这个。左=这个。clientw-这个。项目宽度-30；//距边30px

　　这个。handleicony()；

　　}

　　这个参考文献。呼吸_灯。风格。transition= all。3s’；

　　//上下不贴边方法

　　handleIconY() {

　　如果(this.top 0) {

　　this.top=30//不上帖上边所以设置为30 没设置0

　　} else if(这个。最重要的是。此项目高度。clienth){

　　这个。top=这个。客户-这个。物品高度-30；//距边30px

　　}

　　};

　　/脚本

　　样式lang=scss 范围。呼吸灯{

　　位置：固定；

　　宽度：40px

　　高度：40px

　　边界半径：50%;

　　背景色：橙色；

　　行高：40px

　　文本对齐：居中；

　　颜色：# fff

　　}

　　/风格

　　超文本标记语言悬浮球

　　//index.html

　　！声明文档类型

　　html lang=en

　　！-防止工业管理学(工业工程)提示" Internet Explorer已限制此网页运行脚本或微软倡导的微软倡导的ActiveX网络化多媒体对象技术网络化多媒体对象技术控件" -

　　！-保存自url=(0014)关于：互联网-

　　头

　　meta charset=UTF-8

　　meta name= viewport content= width=device-width，initial-scale=1.0

　　meta http-equiv= X-UA-Compatible content= ie=edge

　　标题文档/标题

　　风格

　　#ballId {

　　背景：rgb(19，167，19)；

　　颜色：白色；

　　宽度：50px

　　文本对齐：居中；

　　高度：50px

　　行高：50px

　　边界半径：50%;

　　box-shadow: 5px 5px 40px rgba(0，0，0，0.5)；

　　/* 过渡效果在工业管理学(工业工程)下展示效果不友好*/

　　过渡：全0.08;

　　用户选择：无；

　　-moz-用户-选择：无；

　　-ms-用户-选择：无；

　　-网络工具包-用户选择：无；

　　top:50%；

　　左：50%;

　　transform: translate3d(-50%，-50%，0)；

　　}

　　/风格

　　/头

　　身体

　　div id=ballId 拖动/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　div id=

　　/div

　　！-脚本src= ./悬浮球。js /脚本-

　　脚本

　　函数悬浮球(dragId，dragLink) {

　　var startEvt，moveEvt，endEvt

　　//判断是否支持触摸事件

　　如果(窗口中的" ontouchstart "){

　　startEvt=touchstart

　　moveEvt=touchmove

　　endEvt=touchend

　　}否则{

　　startEvt=mousedown

　　moveEvt=mousemove

　　endEvt=mouseup

　　}

　　//获取元素

　　var drag=文档。getelementbyid(dragId)

　　drag.style.position=absolute

　　drag.style.cursor=move

　　//标记是拖曳还是点击

　　var isClick=true

　　var disX，disY，left，top，starX，starY

　　drag.addEventListener(startEvt，function(e) {

　　//阻止页面的滚动，缩放

　　预防默认()

　　//兼容工业管理学(工业工程)浏览器

　　var e=e window.event

　　isClick=true

　　//手指按下时的坐标

　　starX=e.touches？e.touches[0].clientX : e.clientX

　　starY=e.touches？e.touches[0].客户：电子客户

　　//手指相对于拖动元素左上角的位置

　　disX=starX - drag.offsetLeft

　　disY=starY - drag.offsetTop

　　//按下之后才监听后续事件

　　文档。添加事件监听器(移动事件，移动乐趣)

　　文档。addevent监听器(end evt，endFun)

　　})

　　函数moveFun(e) {

　　//兼容工业管理学(工业工程)浏览器

　　var e=e window.event

　　//防止触摸不灵敏，拖动距离大于20像素就认为不是点击，小于20就认为是点击跳转

　　如果（

　　Math.abs(starX - (e.touches？e.touches[0].clientX : e.clientX)) 20

　　Math.abs(starY - (e.touches？e.touches[0].客户关系

　　) {

　　isClick=false

　　}

　　left=(e.touches？e.touches[0].clientX : e.clientX) - disX

　　top=(e.touches？e.touches[0].客户：e。客户)- disY

　　//限制拖拽的X范围，不能拖出屏幕

　　如果(左0) {

　　左=0

　　} else if(左文档。documentelement。客户端宽度-拖动。offsetwidth){

　　左=文档。documentelement。客户端宽度-拖动。偏移距离

　　}

　　//限制拖拽的Y范围，不能拖出屏幕

　　如果（前0名){

　　top=0

　　} else if(顶文档。documentelement。客户端高度-拖动。偏移高度){

　　top=文档。documentelement。客户端高度-拖动。偏移高度

　　}

　　drag.style.left=left px

　　drag.style.top=top px

　　}

　　函数endFun(e) {

　　文档。removeeventlistener(移动事件，移动乐趣)

　　文档。removeeventlistener(end evt，endFun)

　　if (isClick) { //点击

　　window.location.href=dragLink

　　}

　　/脚本

　　脚本

　　//使用说明

　　//引入悬浮球。js，调用悬浮球()方法，第一个参数传要拖动元素的id，第二个参数传点击后的跳转链接

　　悬浮球(“巴利德”，“https://www.baidu.com”)

　　/脚本

　　/body

　　/html

　　悬浮球添加弹框

　　模板

　　差异

　　！-悬浮球-

　　差异

　　ref=呼吸灯

　　"呼吸灯"

　　@click=show3=！显示3

　　@触摸开始。stop= handleTouchStart

　　@触摸移动。预防。stop= handleTouchMove($ event)

　　@touchend.stop=handleTouchEnd

　　:style={left: left px ，top: top px ，width: itemWidth px ，height: itemHeight px}

　　v-text=text

　　v-if=isShow

　　/div

　　div id=按钮组合 v-show= show 3 class=折叠过渡

　　埃尔-坍缩-跃迁

　　div class= transition boxs :style= { left:left-20 px ，top: top 30 px}

　　div class=过渡框返回/div

　　div class=过渡框编辑/div

　　div class=过渡框下一步/div

　　/div

　　/El-折叠-转换

　　！-按钮组合/按钮组合-

　　/div

　　/模板

　　样式lang=scss 范围。过渡箱{

　　最小高度：100像素

　　位置：固定；

　　z指数：1024;

　　top:57%；

　　右：5%;

　　边框：1px

　　保证金-最高：5%;

　　}。过渡框{

　　显示器：flex

　　对齐-内容：居中；

　　对齐-项目：居中；

　　边距-底部：10px

　　高度：30px

　　边框-半径：4px

　　背景色：# 409eff

　　颜色：# fff

　　填充：10px 10px

　　框大小：边框-框；

　　宽度：80px

　　}

　　//悬浮球位置。呼吸灯{

　　//left:var(-left)；

　　//top:var(-top)；

　　//width:var(-width)；

　　//height:var(-height)；

　　边框：1px

　　边界半径：50%;

　　宽度：40px

　　高度：40px

　　位置：固定；

　　top:40%；

　　右：0%;

　　z指数：1024;

　　背景：url(././资产/公共所有/云。png’)无重复中心居中；

　　背景尺寸：100% 100%;//背景图片适应外边框大小

　　}

　　/风格

　　脚本

　　从导入按钮组合./public all/button _ comBination ；

　　导出默认值{

　　组件：{

　　按钮组合

　　道具：{

　　文本：{

　　类型：字符串，

　　默认值：""

　　项目宽度：{

　　类型：数量，

　　默认值：40

　　项目高度：{

　　类型：数量，

　　默认值：40

　　}

　　data() {

　　返回{

　　表演3:没错，

　　云：要求(././资产/公共所有/云。png’)，

　　左：0,

　　顶：300,

　　startToMove: false，

　　是的，

　　计时器：空，

　　currentTop: null，

　　clientW:文档。documentelement。客户端宽度，//视口宽

　　文件。documentelement。客户身高//视口高

　　};

　　已创建(){

　　这个。左=这个。clientw-这个。项目宽度-30；

　　这个。top=这个。clienth/2-这个。项目高度/2；

　　方法：{

　　handleTouchStart() {

　　this.startToMove=true

　　这个参考文献。呼吸_灯。风格。transition=“none”；

　　handleTouchMove(e) {

　　const clientX=e .目标接触[0].clientX//手指相对视口的x

　　const clientY=e . target touches[0]。客户关系；//手指相对视口的y

　　const isInScreen=

　　clientX=this.clientW

　　clientX=0

　　clientY=this.clientH

　　clientY=0；

　　如果(这个。开始移动接触目标。长度===1){

　　如果（是屏幕){

　　这个。left=clientX-this。项目宽度/2；

　　这个。top=clientY-this。项目高度/2；

　　}

　　handleTouchEnd() {

　　if (this.left this.clientW/2) {

　　this.left=30//不让贴边所以设置30没设置0

　　这个。handleicony()；

　　}否则{

　　这个。左=这个。clientw-这个。项目宽度-30；//不让贴边所以减30

　　这个。handleicony()；

　　}

　　这个参考文献。呼吸_灯。风格。transition= all。3s’；

　　handleIconY() {

　　如果(this.top 0) {

　　this.top=30//不上帖上边所以设置为30 没设置0

　　} else if(这个。最重要的是。此项目高度。clienth){

　　这个。top=这个。客户-这个。物品高度-30；//不让帖下边所以减30

　　}

　　};

　　/脚本

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读