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. Python中的下划线(译文)

    原文地址这篇文章讨论Python中下划线_的使用.跟Python中很多用法类似,下划线_的不同用法绝大部分(不全是)都是一种惯例约定. 单个下划线(_) 主要有三种情况: 1. 解释器中 _符号是指交 ...

  2. .Net内置特性Attribute介绍

    特性Attribute概述 特性(Attribute)是一种特殊的类型,可以加载到程序集或者程序集的类型上,这些类型包括模块.类.接口.结构.构造函数.方法.字段等,加载了特性的类型称之为特性的目标. ...

  3. sja1000T can相关的知识

    开发环境:硬件环境arm9200 sja1000T,软件环境kernel version 2.6.21.驱动程序:字符驱动 can有两种基本的工作模式:basic can .pelican,pelic ...

  4. 手把手教你在ubuntu上安装apache和mysql和php

    1:首先安装apache:打开终端(ctrl+Alt+t), 输入命令:sudo apt-get install apache2即可安装, 安装完后,打开浏览器,在地址栏输入:localhost或者h ...

  5. scanf_s 可能会出现的死循环

                                        VS2015中提供了scanf_s().在调用时,必须提供一个数字以表明最多读取多少位字符. scanf_s("%s& ...

  6. python 中的高级函数map()

    map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. 例如,对于list [1, 2 ...

  7. 008-Scala主构造器、私有构造器、构造器重载实战详解

    008-Scala主构造器.私有构造器.构造器重载实战详解 Scala主构造器实战 无参数的主构造器 分析 1.name 需要赋初值,一般通过占位符来代表空值 2.private 声明私有的age 生 ...

  8. ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务解决

    先看oracle的监听和oracle的服务是否都启动了. 启动oracle监听:cmd命令行窗口下,输入lsnrctl start,回车即启动监听. 查看oracle的sid叫什么,比如创建数据库的时 ...

  9. Android高效加载大图、多图解决方案,有效避免程序OOM

    高效加载大图片 我们在编写Android程序的时候经常要用到许多图片,不同图片总是会有不同的形状.不同的大小,但在大多数情况下,这些图片都会大于我们程序所需要的大小.比如说系统图片库里展示的图片大都是 ...

  10. 在WPF中获取DataGridTemplateColumn模板定义的内容控件

    xaml格式描述: <DataGrid Name="dataGrid" Grid.Row="1" ItemsSource="{Binding}& ...