jQuery实现移动端悬浮拖动效果
更新时间：2022年02月23日 08:37:06 作者：little_shallot
这篇文章主要为大家详细介绍了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
jQuery是继prototype 之后的又一个优秀的Javascript框架，本篇文章给大家分享收藏的jquery技巧，对jquery技巧相关知识感兴趣的朋友一起学习吧2015-12-12
jQuery下扩展插件和拓展函数的写法（匿名函数使用的典型例子）
这些年，javascript火起来了，主要归功于AJAX的推广应用，Web2.0的发展。。。于是，出现了很多的javascript框架。2010-10-10
今天看到一个jquery插件jquery.fileupload.v.1.5.0，自己试着结合java做了一个ajax的文件上传小应用2009-03-03
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
上一篇解决了用了JQUERY-EASYUI时 后端注册脚本重复执行的问题．今天又发现，通过后端代码 生成的界面有错位现象．2010-06-06
滑动菜单项效果,听起来就是很时尚的一个效果，不过实现起来有些麻烦，还好有本文的出现，可以帮助你解决这个困惑，热爱特效的你可不要错过了哈，好了话不多说切入正文2013-02-02
最近的项目中，好几次用到操作文本域的方法，比如光标位置、删除光标前字符等。每次都是查阅资料（这部分操作涉及到的js方法都比较生僻），费时费事。于是就封装了一个jQuery扩展2014-03-03
Bootstrap table 实现树形表格联动选中联动取消功能
这篇文章主要介绍了Bootstrap table 实现树形表格联动选中联动取消功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了jQuery实现简单的按钮颜色变化，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了一个实用的图片切换支持点击切换和自动轮播，经测试效果相当不错，需要的朋友可以参考下2014-09-09
本文主要分享了jQuery实现鼠标跟随效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论