window.document.getElementById("moveDIV").addEventListener("touchmove", function (event) {
            
            event.preventDefault();
            
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];  // 把元素放在手指所在的位置
             
                if(touch.pageX + $("#moveDIV").width() > $(window).innerWidth()){
                    
                     window.document.getElementById("moveDIV").style.left = ($(window).innerWidth() - $("#moveDIV").width()) + 'px';
                    
                }else if(touch.pageX < $("#moveDIV").width()){
                    
                    window.document.getElementById("moveDIV").style.left = 0 + 'px';
                    
                }else{
                    
                    window.document.getElementById("moveDIV").style.left = touch.pageX + 'px';
                }
                
               if(touch.pageY + $("#moveDIV").height() > $(window).innerHeight()){
                   
                       window.document.getElementById("moveDIV").style.top = ($(window).innerHeight() - $("#moveDIV").height())+ 'px';
                       
               }else if(touch.pageY < $("#moveDIV").height()){
                    
                    window.document.getElementById("moveDIV").style.top = 0 + 'px';
                    
                }else {
                   
                       window.document.getElementById("moveDIV").style.top = touch.pageY + 'px';
                       
               }
            }
        },false)

js按钮浮动随手指方向移动而移动的更多相关文章

  1. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. java窗口按钮设置五个方向

    java窗口按钮设置五个方向 代码如下: package Day08; import java.awt.BorderLayout;import javax.swing.JButton;import j ...

  3. 电力项目十三--js添加浮动框

    修改page/menu/loading.jsp页面 首先,页面中引入浮动窗样式css <!-- 浮动窗口样式css begin --> <style type="text/ ...

  4. JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

    1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...

  5. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  6. js中判断鼠标滚轮方向的方法

      前  言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...

  7. Android 仿电商app商品详情页按钮浮动效果

    1.效果图如下: 这效果用户体验还是很酷炫,今天我们就来讲解如何实现这个效果. 2.分析 为了方便理解,作图分析 如图所示,整个页面分为四个部分: 1.悬浮内容,floatView 2.顶部内容,he ...

  8. JS判断鼠标从什么方向进入一个容器

    偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...

  9. js广告浮动

    一个广告框在指定区域,有定位属性的父级区域内,一直向右向左移动,如果碰到左右边框,反向,如果碰到上下边距,反向,实现在指定框中浮动的效果. <!doctype html> <html ...

随机推荐

  1. 【转】Swift之 ? 和 !

    原文地址:http://joeyio.com/ios/2014/06/04/swift---/ Swift语言使用var定义变量,但和别的语言不同,Swift里不会自动给变量赋初始值,也就是说变量不会 ...

  2. 个人纪录(初)----配置文件.properties的简单读取

    本文为个人文本纪录. demo:::: 1.创建普通的java项目:这实例项目名字叫properties. 2.创建.properties文件:src目录下创建XX.properties文件,识别&q ...

  3. SpringMVC 视图和视图解析器&表单标签

    视图和视图解析器 请求处理方法执行完成后,最终返回一个 ModelAndView 对象.对于那些返回 String,View 或 ModeMap 等类型的处理方法,Spring MVC 也会在内部将它 ...

  4. Spring的入门的程序

    1 下载Spring的开发包: spring-framework-3.2.0.RELEASE-dist.zip ---Spring开发包 docs :spring框架api和规范 libs :spri ...

  5. 多线程的学习与python实现

    学习了进程与线程,现对自己的学习进行记录. 目录: 一.进程与线程的概念,以及联系与区别 二.多线程 三.python中多线程的应用 四.python实例 五.参考文献 一.进程与线程的概念.以及联系 ...

  6. C++ 之 auto_ptr and shared_ptr

    1.auto_ptr 这个所谓的只能指针有点鸡肋!  没有引用计数,而且还有一个所有权转移的情况! 当所有权转移后,以前的auto_ptr将会成为null 2.shared_ptr 增加了引用计数,没 ...

  7. Python的平凡之路(14)

    一.什么是HTML HTML(Hyper Text Mark-up Language ) 即超文本标记语言,是 WWW 的描述语言,由 Tim Berners-lee提出.设计 HTML 语言的目的是 ...

  8. jpa 表字段转bean对象

    select 'private ' || decode(v_type, 'int', 'Integer', 'float', 'Double', 'date', 'Date', 'String') | ...

  9. 字节序相关问题简单总结,LSB与MSB

    细细碎碎的知识点还真是不少啊,今天总结下通信中的数据字节序的问题. 先来认识名词: MSB:Most Significant Bit.    “最高有效位” LSB:Least Significant ...

  10. 集成SDK查看包架构指令

    1.查看支持构架的命令是lipo -info xxxxx.a 2.合并真机和模拟器的库的命令是 lipo -create xxxx_iphoneos.a xxxx_simulator.a -outpu ...