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 相关文章推荐
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
深入理解vue路由的使用
Mar 24 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
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
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
犀利的js 函数集合
2009/06/11 Javascript
range 标准化之获取
2011/08/28 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
python网络编程实例简析
2014/09/26 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
python实现统计代码行数的小工具
2019/09/19 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
岳父生日宴会答谢词
2014/01/13 职场文书
成绩单家长评语大全
2014/04/16 职场文书
三年级学生评语大全
2014/12/26 职场文书
安全员岗位职责范本
2015/04/11 职场文书
企业安全生产规章制度
2015/08/06 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python