Javascript实现苹果悬浮虚拟按钮


Posted in Javascript onApril 10, 2016

Javascript实现苹果悬浮虚拟按钮

直接引入代码到页面即可
代码有部分冗余的地方,有兴趣的小伙伴可也自己修改
如果有什么BUG 记得评论 告诉我哦

web-touch.js

var new_element_N=document.createElement("style"); 
  new_element_N.innerHTML = '#drager {' +
    '   position: fixed;' +
    '   width: 35px;' +
    '   height: 35px;' +
    '   background-color: rgba(0, 0, 0, 0.2);' +
    '   z-index: 10000;' +
    '   cursor: pointer;' +
    '   top: 0px;' +
    '   left: 0px;' +
    '   border-radius: 30%;' +
    '   padding: 6px;' +
    ' }' +
    ' ' +
    ' #drager>div {' +
    '   border-radius: 50%;' +
    '   width: 100%;' +
    '   height: 100%;' +
    '   background-color: rgba(0, 0, 0, 0.3);' +
    '   transition: all 0.2s;' +
    '  -webkit-transition: all 0.2s;' +
    '  -moz-transition: all 0.2s;' +
    '  -o-transition: all 0.2s;' +
    ' }' +
    ' #drager:hover>div{' +
    '   background-color: rgba(0, 0, 0, 0.6);' +
    ' } ';
  document.body.appendChild(new_element_N);
  new_element_N=document.createElement('div'); 
  new_element_N.setAttribute("id","drager");
  new_element_N.style.top="100px";
  new_element_N.style.left="100px";
  new_element_N.innerHTML = ' <div></div>' ;
  document.body.appendChild(new_element_N);
  // 
  // 
    var posX;
    var posY;   
    var screenWidth =document.documentElement.clientWidth;
    var screenHeight = document.documentElement.clientHeight;  
    var fdiv = document.getElementById("drager"); 
    fdiv.onmousedown=function(e)
    { 
      screenWidth =document.documentElement.clientWidth;
      screenHeight = document.documentElement.clientHeight;  
      if(!e){ e = window.event; } //IE
      posX = e.clientX - parseInt(fdiv.style.left);
      posY = e.clientY - parseInt(fdiv.style.top);
      document.onmousemove = mousemove;      
    }
    document.onmouseup = function()//释放时自动贴到最近位置
    {
      document.onmousemove = null;
      if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(screenHeight/2)){//在上半部分
        if((parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)<=(screenWidth/2)){//在左半部分
          if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)){//靠近上方
            fdiv.style.top="0px";
          }else{//靠近左边
            fdiv.style.left="0px";
          }
        }else{//在右半部分
          if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(screenWidth-(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)) ){//靠近上方
            fdiv.style.top="0px";
          }else{//靠近右边
            fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
          } 
        }
      }else{ //下半部分
         if((parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)<=(screenWidth/2)){//在左半部分
          if( (screenHeight-(parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2))<=(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)){//靠近下方
            fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
          }else{//靠近左边
            fdiv.style.left="0px";
          }
        }else{//在右半部分
          if( (screenHeight-(parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2))<=(screenWidth-(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)) ){//靠近上方
            fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
          }else{//靠近右边
            fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
          } 
        }
      } 
    }
    function mousemove(ev)
    {
      if(ev==null){ ev = window.event;}//IE
      if((ev.clientY - posY)<=0){//超过顶部
         fdiv.style.top="0px";
      }else if((ev.clientY - posY) >(screenHeight-parseInt(fdiv.clientHeight))){//超过底部
        fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
      }else{
        fdiv.style.top = (ev.clientY - posY) + "px";
      }
       
       if((ev.clientX- posX)<=0){//超过左边
         fdiv.style.left="0px";
      }else if((ev.clientX - posX) >(screenWidth-parseInt(fdiv.clientWidth))){//超过右边
        fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
      }else{
        fdiv.style.left = (ev.clientX - posX) + "px";
      }
      // console.log( posX +" "+ fdiv.style.left);
       
    }
    window.onload = window.onresize = function() { //窗口大小改变事件
      screenWidth =document.documentElement.clientWidth;
      screenHeight = document.documentElement.clientHeight;  
      if( (parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight))>screenHeight){//窗口改变适应超出的部分
         fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
      }  
      if( (parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth))>screenWidth){//窗口改变适应超出的部分
         fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
      }  
      document.onmouseup.apply()
    };
    fdiv.addEventListener('touchstart', fdiv.onmousedown, false);  
    fdiv.addEventListener('touchmove', function(event) {
            // 如果这个元素的位置内只有一个手指的话
            if (event.targetTouches.length == 1) {
          
 event.preventDefault();// 阻止浏览器默认事件,重要 
              var touch = event.targetTouches[0]; 
              if((touch.pageY)<=0){//超过顶部
                fdiv.style.top="0px";
              }else if(touch.pageY>(screenHeight-parseInt(fdiv.clientHeight))){//超过底部
                fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
              }else{
                fdiv.style.top = (touch.pageY-parseInt(fdiv.clientHeight)/2) + "px";
              }
               
              if(touch.pageX<=0){//超过左边
                fdiv.style.left="0px";
              }else if( touch.pageX >(screenWidth-parseInt(fdiv.clientWidth))){//超过右边
                fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
              }else{
                fdiv.style.left = (touch.pageX-parseInt(fdiv.clientWidth)/2) + "px";
              }
            }
          }, false); 
    fdiv.addEventListener('touchend', document.onmouseup , false);       
    fdiv.ondblclick=function(){//双击事件可能在手机端浏览器会与网页缩放事件冲突
      alert("发挥你们的想象力吧");
    }

html

<!doctype html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Document</title>
   
 
 
</head>
<body>
   
</body>
<script src="web-touch.js" type="text/javascript"></script>
</html>

演示图

Javascript实现苹果悬浮虚拟按钮

Javascript 相关文章推荐
微信开发 消息推送实现代码
Oct 21 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
JS实现吸顶特效
Jan 08 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jQuery实现点击水纹波动动画
Apr 10 #Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 #Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 #Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 #Javascript
JS表单验证的代码(常用)
Apr 08 #Javascript
JavaScript事件代理和委托详解
Apr 08 #Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 #Javascript
You might like
php foreach正序倒序输出示例代码
2014/07/01 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
python list排序的两种方法及实例讲解
2017/03/20 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
Python遍历numpy数组的实例
2018/04/04 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
Python读写文件基础知识点
2019/06/10 Python
Python中一些深不见底的“坑”
2019/06/12 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
python tkinter组件使用详解
2019/09/16 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
为什么会有内存对齐
2016/10/10 面试题
总经理驾驶员岗位职责
2013/12/04 职场文书
中学生期末评语
2014/02/03 职场文书
小学安全教育材料
2014/02/17 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
关于读书的活动方案
2014/08/14 职场文书
二年级数学教学反思
2016/02/16 职场文书
Python图片检索之以图搜图
2021/05/31 Python
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android