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. 最少clock

    var elClock = document.getElementById("clock");var getTime = function(){ var _ = ['00','01 ...

  2. Bootstrap<基础十七>导航栏

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  3. 超强、超详细Redis数据库入门教程

    这篇文章主要介绍了超强.超详细Redis入门教程,本文详细介绍了Redis数据库各个方面的知识,需要的朋友可以参考下 [本教程目录] 1.redis是什么2.redis的作者何许人也3.谁在使用red ...

  4. php 字符串转数组

    $str = "你好吗"; function str($str) {     $length = mb_strlen($str);     for ($i=0; $i<$le ...

  5. leetcode日记 Product of Array Except Self

    Given an array of n integers where n > 1, nums, return an array output such that output[i] is equ ...

  6. Java 设计模式学习

    看完headfirst设计模式,简单总结一下. 写在最前面:设计模式的关心的问题为"弹性.易于维护.易于扩展",通过对模式的应用,让自己的代码能够得到良好的可塑性.但是个人认为不能 ...

  7. Activity的保存状态和状态恢复

    Activity的保存状态和状态恢复 当系统内存不足时,系统会强制结束一些不可见的Activity以节省内存资源.在某些情况下,当被强制结束的Activity再次显示时会出现一些问题. 例如:一个AP ...

  8. 服务器列表里找不到OracleOraDb10g_home1TNSListener

    先安装的ORACLE DB,后配置的数据库,TNSNAMES.ORA, LISTENER.ORA配置完毕,客户端连接不上TNS服务器,发现服务列表里没有OracleOraDb10g_home1TNSL ...

  9. Java输入一行数据并转存到数组中

    直接看下面的代码吧!主要是split和foreach的使用 import java.io.*; import java.util.*; public class Main{ public static ...

  10. grunt安装与配置

    安装 CLI npm install -g grunt-cli//全局安装 npm init //初始化package.json npm init   命令会创建一个基本的package.json文件 ...