移动端元素跟随移动-防苹果悬浮球效果（转载）

非常感谢原作者的分享，毕竟自己折腾了快一天还是有很多问题，感觉主要就卡在了事件对象的获取上和兼容性的问题；第一段代码是我自己的，在页面没有滚动条的情况下没问题，有滚动条时就出现Bug了；

    //这个函数的目的是实现长按时才执行元素移动，我刚开始的逻辑是长按时移动悬浮球，点击时出现弹框$.fn.longPress = function(fn) {var timeout = undefined;var $this = this;for(var i = 0;i<$this.length;i++){$this[i].addEventListener('touchstart', function(event) {timeout = setTimeout(fn, 800);  //长按时间超过800ms，则执行传入的方法}, false);$this[i].addEventListener('touchend', function(event) {clearTimeout(timeout);  //长按时间少于800ms，不会执行传入的方法}, false);}}$("#moreDialog").longPress(function(){console.log("长按了屏幕");var deviceWidth = document.documentElement.clientWidth;var deviceHeight = document.documentElement.clientHeight;$("body").css({"overflow":"hidden"})var drag = document.getElementById('moreDialog2'),drag.addEventListener('touchmove', function(ev){                    console.log(ev)      var ev = ev || window.event;//这里出现了问题。。var _touch = ev.targetTouches[0];var _x= _touch.pageX - 35;var _y= _touch.pageY - 35;console.log(_x,_y)if(_x <= 0){_x = 0;}if(_x >= (deviceWidth-70)){_x = deviceWidth-70}if(_y <= 0){_y = 0;}if(_y >= (deviceHeight-70)){_y = deviceHeight-70} $("#moreDialog").css({"left":_x + "px","top":_y + "px"})/* drag.style.top=(ev.pageY-35)+'px';drag.style.left=(ev.pageX-35)+'px';endTouchX = ev.pageX; */},false)drag.addEventListener('touchend', function(ev){var deviceWidth = document.documentElement.clientWidth;var deviceHeight = document.documentElement.clientHeight;   //window.event? window.event.cancelBubble = true : ev.stopPropagation();$("body").css({"overflow":"auto"})},false)});

折腾了半天，效果不好，应该说就是失败了，还好找到了下面这位分享的代码解决燃眉之急，大家可以借鉴下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><!--设置viewport--><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" /><title>移动端元素移动模仿悬浮球效果</title>
</head>
<style>body,html{margin: 0;padding: 0;}ol{margin: 0;}.div {width: 80px;height: 80px;position: fixed;z-index: 2;left: 78vw;top:20vh;background-color: rgb(129, 185, 231);border-radius: 50%;}li{line-height:30px;}#son{width:40px;height: 40px;position: absolute;left: 50%;top: 50%;margin-top: -20px;margin-left: -20px;background: #fff;opacity: 0.72;border-radius: 50%;}
</style><body><div style="background:#c7e2bf;"><ol><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li><li>每天进步一点点</li></ol></div><div class="div" id="div"><div id="son"></div></div>
</body>
<script>window.onload = function () {var flag = 0; //标记是拖曳还是点击var oDiv = document.getElementById("div");var disX, moveX, L, T, starX, starY, starXEnd, starYEnd;oDiv.addEventListener("touchstart", function (e) {flag = 0;console.log("touchstart",e)e.preventDefault(); //阻止触摸时页面的滚动，缩放disX = e.touches[0].clientX - this.offsetLeft;disY = e.touches[0].clientY - this.offsetTop;//手指按下时的坐标starX = e.touches[0].clientX;starY = e.touches[0].clientY;//console.log(disX);});oDiv.addEventListener("touchmove", function (e) {flag = 1;console.log("touchmove",e)L = e.touches[0].clientX - disX;T = e.touches[0].clientY - disY;//移动时 当前位置与起始位置之间的差值starXEnd = e.touches[0].clientX - starX;starYEnd = e.touches[0].clientY - starY;//console.log(L);if (L < 0) { //限制拖拽的X范围，不能拖出屏幕L = 0;} else if (L > document.documentElement.clientWidth - this.offsetWidth) {L = document.documentElement.clientWidth - this.offsetWidth;}if (T < 0) { //限制拖拽的Y范围，不能拖出屏幕T = 0;} else if (T > document.documentElement.clientHeight - this.offsetHeight) {T = document.documentElement.clientHeight - this.offsetHeight;}moveX = L + "px";moveY = T + "px";//console.log(moveX);this.style.left = moveX;this.style.top = moveY;});oDiv.addEventListener("touchend", function (e) {//alert(parseInt(moveX))//判断滑动方向console.log("touchend",e)if (flag === 0) { //点击console.log("点击")//window.location.href = "http://www.baidu.com";}});}
</script></html>

以上转载至码迷网；因个人的业务需求不尽相同，需要自己更改一下，我需要移动和点击两个功能，引入了jQuery mobile 的事件模块，

    $("#moreDialog2").on("tap", function (e) {console.log("点击了")e.preventDefault();//这里放点击时的业务逻辑});

移动端元素跟随移动-防苹果悬浮球效果（转载）相关推荐

手机html端悬浮球,手机移动端网站触屏可拖动悬浮球
手机移动端网站触屏可拖动悬浮球 touch { width: 60px; height: 60px; position: absolute; left: 600px; top: 300px; marg ...
html防微信音乐,web高仿樊登H5/微信音乐播放悬浮球效果
这两天完成了一个仿樊登 H5 的音乐播放悬浮球效果,这个效果跟微信音乐播放悬浮球的效果也很相似,今天总结一下实现的思路过程(基于 Vue 实现). 先来看看樊登 H5 的效果. 再来看看我的实现,挺完 ...
微信小程序悬浮球效果
用的是微信文档里的组件movable-area和movable-view <movable-area class="movable-area"><movable- ...
vc++实现悬浮窗，迅雷360悬浮球效果
1.SetWindowRgn创建圆角悬浮窗DlgFloat rgn.CreateRoundRectRgn(rect.left, rect.top, rect.Width(), rect.Height( ...
苹果悬浮球_短距悬浮球发挥想象的小宇宙，不要被“教条”式打法限制你！
安卓直接点图片,苹果扫二维码相信各位球友在场下都试过,开球漂亮,第二杆距离也完美,就是差了一点点方向,飞了进果岭边的长草区.果岭距离也在切杆的控制范围内,但偏偏因为长草的特殊球位,让正常的切杆打法没 ...
苹果悬浮球_一颗悬浮球玩转你的手机！停不下来
现在出门随便观察一下大家的手机,就能得出一个结论:大家的手机屏幕越来越大.如果在地铁公交上一只手很难操作手机,对于这件难题我一直以为没办法解决,除非换小屏幕手机,但小屏幕在用的时候又很不爽. 终于让我 ...
苹果悬浮球_幽眼进阶：苹果优化+安卓内测发布！
苹果:固件更新 1. 支持安卓 2. 修复鼠标按键超过5个无效问题 3. 优化视野的微小移动响应(微调视野更平顺) 4. 优化十字键的响应速度(微调更顺滑) 5. 可自定义设置鼠标出边界后的冷却时间( ...
苹果悬浮球_买了一万块钱的苹果手机，悬浮球功能不会用？真的可惜了
苹果手机悬浮球就是大家俗称的"小白点"功能,虽然说现在是全面屏时代,大多数人都习惯了虚拟按键进行操作.也有很多快捷键功能. 但是iPhone手机小白点作为苹果手机经典功能之一,很多 ...
苹果悬浮球_苹果iPhone X关闭静音模式振动功能的操作方法_教程_新闻_【生意多】...
iPhone X静音模式振动功能如何关闭?当我们在上班或者上课的时候,手机一般都是设置为静音模式,这样设置为静音模式以后,如果有电话打进来就不会影响到同事或者同学:但是设置为静音模式以后,手机就真的静 ...

移动端元素跟随移动-防苹果悬浮球效果（转载）

折腾了半天，效果不好，应该说就是失败了，还好找到了下面这位分享的代码解决燃眉之急，大家可以借鉴下：

移动端元素跟随移动-防苹果悬浮球效果（转载）相关推荐

最新文章

热门文章