jQuery實現(xiàn)移動端懸浮拖動效果

更新時間：2022年02月23日 08:37:06 作者：little_shallot

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)移動端懸浮拖動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

模擬手機端懸浮按鈕功能，自動吸附兩邊，并且不能超過活動區(qū)域，上下超過自動吸附上或下

因為是移動端端事件，需要調(diào)試到移動端才可以看效果

以下是代碼

<!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">活動區(qū)域</div>
?? ?<div class="service">
? ? <!-- ? ?<div class="service_s"></div>--> ?<!-- ? ? ? ?遮罩層-->
</div>
<script>
? ? /**
? ? ?* ?nx ?ng 移動坐標
? ? ?* ? wxX wxY ?初始坐標
? ? ?* ? ? ?isDown 阻止事件重復(fù)觸發(fā)
? ? ?* **/
? ? var nx, ny, wxX, wxY, isDown = false; ?//X Y坐標
? ? // H5頁面
? ? $('.service').bind("touchstart", function (e) {
? ? //點擊觸發(fā)
? ? ? ? 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) {
? ? ? ? //滑動觸發(fā)
? ? ? ? ? ? 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) {
? ? ?? ?//移開觸發(fā)
? ? ? ? var touch = event.changedTouches[0];
? ? ? ? //判斷跟初始坐標是否一致，一致則大概率為點擊事件
? ? ? ? if (wxX === touch.clientX && wxY === touch.clientY) {
? ? ? ? ? ? alert('點擊了')
? ? ? ? } else {
? ? ? ? //判斷所在位置,自動吸附左右，如果超過上下活動區(qū)域范圍則在左右的基礎(chǔ)上加上吸附上下
? ? ? ? ? ? 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: