<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>pc 移動端 仿iPhone懸浮球效果</title>
<style>
* {
margin: 0;
padding: 0;
}
.assistive-wrap {
width: 58px;
height: 58px;
position: fixed;
top: 50%;
margin-top: -29px;
left: 1px;
}
.assistive-touch {
width: 100%;
height: 100%;
background: #343434;
border-radius: 10px;
opacity: .3;
position: relative;
}
.assistive-touch:before,
.assistive-touch:after,
.assistive-touch span {
content: '';
position: absolute;
border-radius: 100%;
box-shadow: 0 0 2px rgba(30, 30, 30, .5);
display: block;
background: rgba(255, 255, 255, .6);
}
.assistive-touch:before {
width: 42px;
height: 42px;
left: 8px;
top: 8px;
opacity: .5;
}
.assistive-touch span {
width: 34px;
height: 34px;
left: 12px;
top: 12px;
}
.assistive-touch:after {
width: 26px;
height: 26px;
left: 16px;
top: 16px;
background: #fff;
}
.animate {
transition: 0.4s;
}
</style>
<script>
window.onload = function () {
var startEvt, moveEvt, endEvt
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
if ('ontouchstart' in window) {
startEvt = 'touchstart'
moveEvt = 'touchmove'
endEvt = 'touchend'
} else {
startEvt = 'mousedown'
moveEvt = 'mousemove'
endEvt = 'mouseup'
}
var drag = document.getElementById("assistive-wrap");
drag.style.position = 'absolute'
drag.style.cursor = 'move';
// 標(biāo)記是拖曳還是點擊
var isClick = true
var disX, disY, left, top, starX, starY
drag.addEventListener(startEvt, function (e) {
// 阻止頁面的滾動斗躏，縮放
e.preventDefault()
// 兼容IE瀏覽器
var e = e || window.event
isClick = true
// 手指按下時的坐標(biāo)
starX = e.touches ? e.touches[0].clientX : e.clientX
starY = e.touches ? e.touches[0].clientY : e.clientY
// 手指相對于拖動元素左上角的位置
disX = starX - drag.offsetLeft
disY = starY - drag.offsetTop
// 按下之后才監(jiān)聽后續(xù)事件
document.addEventListener(moveEvt, moveFun)
document.addEventListener(endEvt, endFun)
})
function moveFun(e) {
drag.classList.remove("animate");
// 兼容IE瀏覽器
var e = e || window.event
// 防止觸摸不靈敏，拖動距離大于20像素就認(rèn)為不是點擊铭腕，小于20就認(rèn)為是點擊跳轉(zhuǎn)
if (
Math.abs(starX - (e.touches ? e.touches[0].clientX : e.clientX)) > 20 ||
Math.abs(starY - (e.touches ? e.touches[0].clientY : e.clientY)) > 20
) {
isClick = false
}
left = (e.touches ? e.touches[0].clientX : e.clientX) - disX
top = (e.touches ? e.touches[0].clientY : e.clientY) - disY
// 限制拖拽的X范圍裕坊，不能拖出屏幕
if (left < 0) {
left = 0
} else if (left > clientWidth - drag.offsetWidth) {
left = clientWidth - drag.offsetWidth
}
// 限制拖拽的Y范圍俐筋，不能拖出屏幕
if (top < 0) {
top = 0
} else if (top > document.documentElement.clientHeight - drag.offsetHeight) {
top = document.documentElement.clientHeight - drag.offsetHeight
}
drag.style.left = left + 'px'
drag.style.top = top + 'px'
}
function endFun(e) {
drag.classList.add('animate');
var dargCenterX = drag.offsetLeft + drag.offsetWidth / 2;
console.log(drag.offsetWidth / 2);
console.log(dargCenterX);
if (dargCenterX < clientWidth / 2) {
//吸附左側(cè)
drag.style.left = 0;
} else {
//吸附在右側(cè)
drag.style.left = clientWidth - drag.offsetWidth + "px";
}
document.removeEventListener(moveEvt, moveFun)
document.removeEventListener(endEvt, endFun)
if (isClick) { // 點擊
// window.location.href = dragLink
}
}
}
</script>
</head>
<body>
<div class="assistive-wrap" id="assistive-wrap">
<div class="assistive-touch">
<span></span>
</div>
</div>
</body>
</html>
image.png
參考 https://juejin.cn/post/6854573211284144135
https://www.bbsmax.com/A/qVden0DMzP
