js按钮浮动随手指方向移动而移动
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按钮浮动随手指方向移动而移动的更多相关文章
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- java窗口按钮设置五个方向
java窗口按钮设置五个方向 代码如下: package Day08; import java.awt.BorderLayout;import javax.swing.JButton;import j ...
- 电力项目十三--js添加浮动框
修改page/menu/loading.jsp页面 首先,页面中引入浮动窗样式css <!-- 浮动窗口样式css begin --> <style type="text/ ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
- js中判断鼠标滚轮方向的方法
前 言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...
- Android 仿电商app商品详情页按钮浮动效果
1.效果图如下: 这效果用户体验还是很酷炫,今天我们就来讲解如何实现这个效果. 2.分析 为了方便理解,作图分析 如图所示,整个页面分为四个部分: 1.悬浮内容,floatView 2.顶部内容,he ...
- JS判断鼠标从什么方向进入一个容器
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...
- js广告浮动
一个广告框在指定区域,有定位属性的父级区域内,一直向右向左移动,如果碰到左右边框,反向,如果碰到上下边距,反向,实现在指定框中浮动的效果. <!doctype html> <html ...
随机推荐
- 《JavaScript高级程序设计》读书笔记--(1)JavaScript简介
概述 JavaScript是一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HT ...
- 面试复习(C++)之快速排序
#include <iostream> using namespace std; void Quicksort(int *a,int low,int high) { if(low>h ...
- js数组去重的方法
//数组去重 Array.prototype.unique = function() { var newArr = [], hash = {}; for(var i=0, len=this.lengt ...
- windows8.1下android开发环境搭建(Eclipse+Android sdk+ADT+Genymotion)
一.基本jdk.eclipse环境 二.android sdk 1.下载安装:https://developer.android.com/sdk/installing/index.html?pkg=t ...
- Jupyter notebook 配置目录
默认打开Jupyter notebook,工作目录是C:\Users\Username,这里面有很多其它与Jupyter notebook无关的文件,也很有用,不能看着烦就删掉,所以需要修改Jupyt ...
- .NET C# 将 mdb 中数据读为 list<string[]> 其中 path 为数据库地址 ,sql 为查询语句
using System.Data; using System.Data.OleDb; public static List<string[]> select_list(string pa ...
- win10 Unistack 服务组 占用资源如何解决
开始菜单>设置>隐私,隐私界面的左侧栏目,找最后一个“后台应用”,把后台运行的应用全部关掉即可
- (转发)centos,redhat 系统为php安装memcached扩展
转自:http://www.itnose.net/detail/6111623.html 1. 通过yum安装 yum -y install memcached #安装完成后执行: memcached ...
- VS调试时下不到断点的处理方式。
调试无法命中断点的情况我想很多人遇到过,反正我是遇到过很多次了,有时候是没有生成项目或解决方案,有时候是调试版本不一致. 当然还有其他的情况都已经忘记如何处理的了. 今天在release模式下要调试代 ...
- 《Eclipse中的一些快捷键》
1,window--首选项--Java--templates 自定义模板. 2,快捷键. 2.1 alt+/ 内容辅助. 2.2 ctrl+1 : 对小红×的提供解决法案.大红×(代码错误)必须修改代 ...