jQuery實現移動端懸浮拖動效果
模擬手機端懸浮按鈕功能，自動吸附兩邊，並且不能超過活動區域，上下超過自動吸附上或下
因為是移動端端事件，需要調試到移動端才可以看效果
以下是代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<title>Document</title>
<style>
.service_s {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
display: none;
}
* {
padding: 0;
margin: 0;
}
.content {
position: fixed;
top: 10%;
right: 3%;
left: 3%;
bottom: 10%;
border: 1px solid #cccc77;
background: #cccc77;
display: flex;
align-items: center;
color: #fff;
font-weight: 600;
justify-content: center;
}
.service {
position: fixed;
top: 60%;
right: 3%;
height: 40px;
width: 40px;
background: #0baefd;
z-index:9
}
</style>
</head>
<body>
<div class="content">活動區域</div>
<div class="service">
<!-- <div class="service_s"></div>--> <!-- 遮罩層-->
</div>
<script>
/**
* nx ng 移動坐標
* wxX wxY 初始坐標
* isDown 阻止事件重復觸發
* **/
var nx, ny, wxX, wxY, isDown = false; //X Y坐標
// H5頁面
$('.service').bind("touchstart", function (e) {
//點擊觸發
e.preventDefault();
$(this).css("transform", 'translate(0)')
var touch = event.targetTouches[0];
wxX = touch.clientX;
wxY = touch.clientY;
// $('.service_s').show() //是否需要一個遮罩層
isDown = true;
$(document).bind("touchmove", function (ev) {
//滑動觸發
e.preventDefault();
if (!isDown) return
var touch = event.targetTouches[0];
ny = touch.clientY - $('.service').height() / 2
nx = touch.clientX - $('.service').width() / 2
$('.service').css('top', '' + ny / ($(window).height() / 100) + '%')
$('.service').css('left', '' + nx / ($(window).width() / 100) + '%')
})
}).bind("touchend", function (e) {
//移開觸發
var touch = event.changedTouches[0];
//判斷跟初始坐標是否一致，一致則大概率為點擊事件
if (wxX === touch.clientX && wxY === touch.clientY) {
alert('點擊瞭')
} else {
//判斷所在位置,自動吸附左右，如果超過上下活動區域范圍則在左右的基礎上加上吸附上下
if (nx < $(window).width() / 2) {
if ($(window).height() * 0.9 - $('.service').height() < ny) {
$('.service').css({"top": "90%", "transform": `translateY(${-($(this).height())}px)`})
} else if ($(window).height() * 0.1 > ny) {
$('.service').css({"top": "10%"})
}
$('.service').css({"left": "3%",})
} else {
if ($(window).height() * 0.9 - $('.service').height() < ny) {
$('.service').css({
"top": "90%",
"left": "97%",
"transform": `translate(${-($(this).height())}px,${-($(this).width())}px)`
})
} else if ($(window).height() * 0.1 > ny) {
$('.service').css({"top": "10%", "left": "97%", "transform": `translateX(${-($(this).width())}px)`})
} else {
$('.service').css({"left": "97%", "transform": `translateX(${-($(this).width())}px)`})
}
}
}
isDown = false;
//$('.service_s').hide()
})
</script>
</body>
</html>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。