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 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
js获取form的方法
May 06 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 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
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
PHP闭包函数详解
2016/02/13 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
JQuery live函数
2010/12/24 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
Python Django基础二之URL路由系统
2019/07/18 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
执行力心得体会
2013/12/31 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
分享几种python 变量合并方法
2022/03/20 Python