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 ...
随机推荐
- hadoop配置机架感知
接着上一篇来说.上篇说了hadoop网络拓扑的构成及其相应的网络位置转换方式,本篇主要讲通过两种方式来配置机架感知.一种是通过配置一个脚本来进行映射:另一种是通过实现DNSToSwitchMappin ...
- Java基本
定义类的方法 class 类名{ 属性; 方法; } 属性也叫成员变量,主要用于描述累的状态方法也叫成员方法,主要用于描述类的行为 class Person{ int age; void show() ...
- PHP是什么
php 是一种服务器端的,嵌入html的脚本语言.php区别其他像客户端java的地方是它的代码在服务器端执行.php能做什么? 最低水平,php可以做任何其他cgi程序所能做的事,例如收集表格数据, ...
- Win8 传统桌面下无法上网的解决方法
Win8 很酷,就连出现的问题也都酷得不行~ 之前遇到的一些问题与解决方法,避免重新安装 1. Word 2013下, 输入法突然秀逗, 经常按了一个键后, 死循环输入该字符直到死机 解决方法: 进入 ...
- Android的权限检查
Application的权限: 可以在AndroidManifest.xml中用<permission>定义运行Application需要的权限. 用<uses-permission ...
- sql修改字段名称
EXEC sp_rename 'RPersonalityColor.[PTF_UPDATE_DT]','PTC_UPDATE_DT','COLUMN'; RPersonalityColor.[PTF_ ...
- 练习sql语句的好去处——http://www.sqlzoo.cn/
sql语句的编写需要按照实际的例子来练习. 如果自己来做准备,需要你自己搭好数据库,建好库和表,还要填入数据,最后自己想出题目和正确答案. 不过,现在我发现了一个好去处,http://www.sqlz ...
- extern引发的闹剧
最近一个朋友让我帮他解决一个问题,由于源代码不方便贴出来,所以就自己写了个demo把问题重现一次 1.新建一个application,添加一个继承于NSObject的类 本来是随便写的,就将此类命名为 ...
- B2C电子商务基础系统架构解析(转载)
系统的开发与演化,前台严格follow消费者的购买流程,后台则盯牢订单流转,牢牢抓住这两条主线,才能高屋建瓴的看清B2C的逻辑链和数据流,更深刻的规划功能模块,从而更有效支撑实际业务的流转. 前台 前 ...
- 点击按钮跳出隐藏的div层,并设背景。
style: .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 10 ...