JS实现悬浮球只在一侧滑动并且是横屏状态下

2023-07-18 14:27:07 74

公司有一个新的需求是需要悬浮球在一侧上下滑动其实是很简单的而且网上都有各种案例，但是偏偏是横屏状态下，而且不是手机横屏是用css强制旋转屏幕90度之后的横屏，所以就会出现坐标系的紊乱，然后我这个功能一开始做成的效果就是触摸上下滑动的时候，悬浮球是左右走（目前的这个图片的上下左右），当时非常的苦恼，接下来贴上我的代码，大家可以参考，有问题可以评论指出，谢谢！我先把我的基本布局拿过来，用的js是flexible.js写的移动端的布局；

因为代码是有一阵子了我也是从网上找的相关的正常悬浮球的移动的案例之后再研究的横屏下的悬浮球移动；如涉及侵权，请谅解或者指出我会标明出处；感谢配合；

下面的是html

图片那里大家可以自行更换











保存



下载

下面的是css因为我当时写这个的时候是依赖于一个云项目中的SDK自带的样式它的样式就是这么强制横屏的所以我当时为了测试，就自己先写在了自己的样式里面仅供参考如有更好的大家可以尽可能的提出！

#example{
width:100%;
height:100%;
position:relative;
/*这是分割线以下是为了屏幕旋转成横屏仅供参考*/
width:667px;
height:375px;
left:-146px;
top:146px;
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
-moz-transform-origin:centercenter;
-webkit-transform-origin:centercenter;
-o-transform-origin:centercenter;
-ms-transform-origin:centercenter;
transform-origin:centercenter
}


/*侧边的悬浮球*/
.sideDown{
width:1rem;
height:100%;
position:absolute;
z-index:444;
right:0;
display:block;
}

.sideDownul{
width:1rem;
height:1rem;
display:flex;
align-items:center;
position:absolute;
top:20px;
right:0;
opacity:1;
}

.sideDownulimg.suspBall{
display:inline-block;
width:1rem;
height:1rem;
z-index:333;
}

.sideDownli{
position:absolute;
z-index:222;
right:0.15rem;
width:3.3rem;
height:0.60rem;
background:rgba(255,230,0,1);
border-radius:0.35rem;
opacity:0.9;
display:flex;
align-items:center;
}

.sideDownlip{
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
margin-left:0.5rem;
}

.sideDownlipimg{
display:inline-block;
width:0.29rem;
height:0.29rem;
}

.sideDownlip:first-child{
width:0.2rem;
height:0.2rem;
margin-left:0.16rem;
}

.sideDownlip:first-childimg{
display:inline-block;
width:0.2rem;
height:0.2rem;
}

.sideDownlip:first-childimg{
display:inline-block;
width:0.2rem;
height:0.2rem;
}

.sideDownlipi{
display:inline-block;
font-size:0.17rem;
font-family:PingFangSC-Regular,PingFangSC;
font-weight:400;
color:rgba(51,51,51,1);
}

以下是重点js代码

下面进行详细的解说：

varbigbox_w=bigBox.offsetHeight;
varbigbox_h=bigBox.offsetWidth;

这两句按正常的竖屏的话应该是

varbigbox_w=bigBox.offsetWidth；
varbigbox_h=bigBox.offsetHeight；
offsetWidth显示的是盒子正常的宽（也就是你css里面写的宽）
offsetHeight显示的是盒子正常的高（也就是你css里面写的高）

但是由于横屏你的视觉中看到的就是一下左图中宽高
这就是需要把offsetWidth和offsetHeight换一下才是右图中打印出来的宽高才是视觉中的宽高；
同理小盒子的大小（16,17行）也需要换一下，尽管小盒子是一个正方形的；[/code]

这个是大盒子的间距；offsetLeft和offsetTop也不是视觉中的left和top

varbigBox_l=bigBox.offsetLeft;
varbigBox_t=bigBox.offsetTop;

此时的大盒子的offsetTop为0我就不在图中标出来了；大家应该明白就是图中的右边距离；

手机按下事件这里就不多说了基本上就是按下（touchstart）移动（touchmove）抬起（touchend）

整体的逻辑就是按下的时候记录一下鼠标在小盒子里面的位置

以下就是关键，弄不好鼠标的位置就记录错了，我也是反反复复的想才想明白；

我会用图向大家解说

disX=bigbox_w-ev.touches[0].pageX-smallBox.offsetTop;
disY=ev.touches[0].pageY-bigBox_l;

鼠标按下的值已经记录完毕然后就是鼠标移动的时候小球也要跟着动

varmoveX=bigbox_w-e.touches[0].pageX-disX;
varmoveY=e.touches[0].pageY-disY;

最后就是赋值

当然了临界值的话比较好判断这里就不多说了；

smallBox.style.top=moveX+'px';
smallBox.style.left=moveY+'px';

这里需要注意的是小盒子的top值其实是你最后算出来的moveX值；left值就是moveY值；写了好久了自己的能力有限如果有更好的或者可以改进的方式随时等待大家的评论来指点，谢谢大家；

到此这篇关于JS实现悬浮球只在一侧滑动并且是横屏状态下的文章就介绍到这了,更多相关js悬浮球滑动内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

JS实现悬浮球只在一侧滑动并且是横屏状态下

热门推荐

随机推荐