一入前端深似海，从此红尘是路人系列第十二弹之移动端模拟IOS虚拟按钮效果

用过苹果的大家都知道，苹果公司做了一个虚拟按钮，让页面上的挂件可被拖拽并吸附到屏幕边框处，降低挂件对用户的干扰。该效果如果用JavaScript进行实现又该如何实现呢，接下来我将分享给大家。首先上一张效果图


 

一、思路来源

首先体验过该虚拟按钮的都知道，它是根据距离屏幕边距进行一个位移判断的。当手从屏幕中放开的时候，对边距判断后进行动态效果操纵，这里动态我们将用到transform进行控制，代码也是纯原生JavaScript。这里我们也只是做一个移动效果的模拟，对于其中的一些功能并没有添加进来。

二、代码编写

1、html

<div class="i-pendant" id="pendant"> <div class="drag"></div> </div>

2、css

.i-pendant { width: 60px; height: 60px; border-radius: 5px; background: #999; position: fixed; top: 300px; right: 0; z-index: 90; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .drag { width: 80%; height: 80%; margin: 10%; border-radius: 100%; background: #fff; }

3、JavaScript

首先我们需要先获取虚拟按钮，并定义一些全局状态，方便之后的拖拽判定

var pendant = document.getElementById("pendant"); var posX = parseInt(pendant.offsetLeft); var posY = parseInt(pendant.offsetTop); var screenWidth = document.documentElement.clientWidth; var screenHeight = document.documentElement.clientHeight; // 判断手势按下状态 var state = { type: null }; //检测是否move事件 var isMove = false;

定义不同手势对应的事件

var Events = { // 手势按下 onmousedown: function (event) {}, // 手势抬起 onmouseup: function (event) {}, // 手势移动 onmousemove: function (event) {} };

接下来我们需要做的就是一一实现这些手势事件，手势按下事件实现：

// 手势按下 onmousedown: function (event) { state.type = 'down'; screenWidth = document.documentElement.clientWidth; screenHeight = document.documentElement.clientHeight; var _touchs = event.targetTouches[0]; posX = _touchs.clientX; posY = _touchs.clientY; isMove = false; }

手势抬起事件实现：

// 手势抬起 onmouseup: function (event) { if (isMove) { var _top = posY, _left = posX; state.type = 'up'; if ((posY + parseInt(pendant.clientHeight) / 2) <= (screenHeight / 2)) { //在上半部分 if ((posX + parseInt(pendant.clientWidth) / 2) <= (screenWidth / 2)) { //在左半部分 if ((posY + parseInt(pendant.clientHeight) / 2) <= (posX + parseInt(pendant.clientWidth) / 2)) { //靠近上方 _top = 0; } else { //靠近左边 _left = 0; } } else { //在右半部分 if ((posY + parseInt(pendant.clientHeight) / 2) <= (screenWidth - (posX + parseInt(pendant.clientWidth) / 2))) { //靠近上方 _top = 0; } else { //靠近右边 _left = (screenWidth - parseInt(pendant.clientWidth)); } } } else { //下半部分 if ((posX + parseInt(pendant.clientWidth) / 2) <= (screenWidth / 2)) { //在左半部分 if ((screenHeight - (posY + parseInt(pendant.clientHeight) / 2)) <= (posX + parseInt(pendant.clientWidth) / 2)) { //靠近下方 _top = (screenHeight - parseInt(pendant.clientHeight)); } else { //靠近左边 _left = 0; } } else {//在右半部分 if ((screenHeight - (posY + parseInt(pendant.clientHeight) / 2)) <= (screenWidth - (posX + parseInt(pendant.clientWidth) / 2))) { //靠近上方 _top = (screenHeight - parseInt(pendant.clientHeight)); } else { //靠近右边 _left = (screenWidth - parseInt(pendant.clientWidth)); } } } setTransform(_left, _top); } else { if (!!event) { //点击事件触发入口 console.log('touch event'); } } }

手势移动事件实现：

// 手势移动 onmousemove: function (event) { isMove = true; // 如果这个元素的位置内只有一个手指的话 var _top = posY, _left = posX; state.type = 'move'; if (event.targetTouches.length === 1) { event.preventDefault();// 阻止浏览器默认事件，重要 var touch = event.targetTouches[0]; if ((touch.clientY) <= 0) { //超过顶部 _top = 0; } else if (touch.clientY > (screenHeight - parseInt(pendant.clientHeight))) {//超过底部 _top = screenHeight - parseInt(pendant.clientHeight); } else { _top = touch.clientY - parseInt(pendant.clientHeight) / 2; } if (touch.clientX <= 0) { //超过左边 _left = 0; } else if (touch.clientX > (screenWidth - parseInt(pendant.clientWidth))) { //超过右边 _left = screenWidth - parseInt(pendant.clientWidth); } else { _left = touch.clientX - parseInt(pendant.clientWidth) / 2; } setTransform(_left, _top); } }

我们在手势事件中可以看到一个函数叫setTransform，接下来我们将实现它：

/** * @param {[type]} _left [左偏移] * @param {[type]} _top [顶部偏移] */ function setTransform(_left, _top) { posX = _left; posY = _top; if (state.type === 'up') { pendant.style.webkitTransitionDuration = '.2s'; } else { pendant.style.webkitTransitionDuration = '0s'; } pendant.style.webkitTransform = 'translate3d(' + posX + 'px,' + posY + 'px,0)'; }

最后我们还需要对虚拟按钮进行一个参数的初始化

//初始化虚拟按钮参数 function init() { screenWidth = document.documentElement.clientWidth; screenHeight = document.documentElement.clientHeight; var _top = posY, _left = posX; if ((posY + parseInt(pendant.clientHeight)) > screenHeight) { //窗口改变适应超出的部分 _top = (screenHeight - parseInt(pendant.clientHeight)); } if ((posX + parseInt(pendant.clientWidth)) > screenWidth) { //窗口改变适应超出的部分 _left = (screenWidth - parseInt(pendant.clientWidth)); } //把样式的top、left赋值到transform去 setTransform(_left, _top); pendant.style.top = 0; pendant.style.left = 0; state.type = 'init'; Events.onmouseup(null); }

最后我们调用一下init方法，虚拟按钮拖动效果就模拟出来了。小伙伴还不赶紧去试一下看看，是不是和苹果的虚拟按钮拖动起来是一样的效果呢。如果觉得好用或者好玩的话，记得给qiangdada点个赞哦↖(^ω^)↗

原文发布时间为：2017年01月18日
原文作者： qiangdada

本文来源：开源中国 如需转载请联系原作者