html5游戏指尖跟随,图片跟随手指滑动
touch事件,给你个简单的事例吧,返回动画什么的你自己完成吧,我是直接返回的。
*{
margin: 0;
padding: 0;
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
position: relative;
/* touch-action: none; */
}
.box{
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: #000;
}
touch('box');
function touch(id){
var obj = document.getElementById(id);
obj.addEventListener('touchstart', function(event) {
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
var disX=touch.pageX-obj.offsetLeft;
var disY=touch.pageY-obj.offsetTop;
obj.addEventListener('touchmove',move);
function move(event){
//event.preventDefault();
document.documentElement.style.touchAction = 'none';
var touch2=event.targetTouches[0];
//var l=touch2.pageX-disX;
var t=touch2.pageY-disY;
// if(l<0){
// l=0;
// };
// if(l>document.documentElement.clientWidth-obj.offsetWidth){
// l=document.documentElement.clientWidth-obj.offsetWidth
// };
if(t<0){
t=0;
};
if(t>document.documentElement.clientHeight-obj.offsetHeight){
t=document.documentElement.clientHeight-obj.offsetHeight;
};
//obj.style.left=l+'px';
obj.style.top=t+'px';
};
obj.addEventListener('touchend',chend);
function chend(event){
if(obj.offsetTop<150){
alert('成功');
obj.style.top='auto';
obj.style.bottom='0px';
}else{
obj.style.top='auto';
obj.style.bottom='0px';
};
document.documentElement.style.touchAction = 'auto';
obj.removeEventListener('touchmove',move);
obj.removeEventListener('touchend',chend);
};
};
}, false);
};
html5游戏指尖跟随,图片跟随手指滑动相关推荐
- 手机看html网页内容重叠,html5手机端叠加图片触屏滑动查看特效
特效描述:html5手机端 叠加图片 触屏滑动查看特效.html5手机叠加图片手指滑动查看 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 rutrum tellus a tempus ...
- 通过触摸屏幕/鼠标 图片跟随手指 加滑动效果
<领导关怀版本 需求3> 一:图片本地加载,打字效果,循环播放 二:通过触摸屏幕/鼠标 滑动 三:跟随手指,滑动效果 版本系列(一):实现了读取本地图片,循环播放功能 版本系列(二):原来 ...
- Android自定义View,跟随手指滑动效果
Android自定义View,实现跟随手指滑动效果, 效果如下: 一,重写onTouchEvent方法 最后返回true 二,在MotionEvent.ACTION_MOVE情况下改变自定义view ...
- Slip——整屏滑动,移动端跟随手指滑动
简介 移动端跟随手指滑动组件,零依赖. 使用方法 1.Html <!doctype html>... <script type="text/javascript" ...
- 移动端手指滑动,高度跟随手指滑动位置而改变
效果:列表刚开始显示高度为200,手指滑动,列表高度随手指位置改变,列表最高高度为500 实现这个功能之前先说一下手指触摸事件 //手指按下触发 touchstart(event) {var touc ...
- 图片跟随鼠标移动并放大js特效
js实现图片放大,并跟随鼠标移动 图片跟随鼠标移动并放大js特效 很多网站有类似于淘宝放大镜的效果,只不过这里说的是 " 不仅能直接放大,而且会跟随鼠标移动 " ! 类似于&quo ...
- html浮动跟随鼠标,jQuery 图片跟随鼠标浮动
不知你有没注意到我的网站首页,上面浮动着一层雪花的背景,并且随着鼠标的移动也在移动着. 本文主要讲述了如何判断鼠标的位置,从而实现图片跟随鼠标进行浮动.为了方便查看和理解,在Demo的左下角把各个参数 ...
- jQuery的事件冒泡,事件对象和图片跟随
** jQuery的事件冒泡,事件对象和图片跟随 ** 事件冒泡## 点击我是span这个,他会提示两个弹窗,第一个是 我是span,第二个是 我是div. 在span标签后加一个 return fl ...
- html5动态效果随鼠标动,html5+CSS3心形动画跟随鼠标光标运动特效
html5+CSS3心形动画跟随鼠标光标运动特效 代码片段: this.update = function () { var lastPoint = { x: _this.x, y: _this.y ...
最新文章
- 【UIKit】解决iOS7状态栏问题
- python好学嘛-Python对于没有计算机基础知识的人来说,好学吗?
- 求m ,n 两个数的最小公倍数
- Kafka MirrorMaker 跨集群同步工具
- 用数组模拟队列的实现
- php 支付宝小程序授权登陆验签_星巴克“啡快”登陆支付宝小程序,让你“飞快”取到咖啡...
- linux redis图形界面,linux安装redis和windows安装可视化工具
- In the beginning, many people on Wall Street did
- 使用SQL Server日志传送将SQL数据库移动到其他服务器
- SAP MM批次管理
- Ubuntu20安装向日葵
- 【深度学习-吴恩达】L1-3 浅层神经网络 作业
- DSPE-PEG-TH(AGYLLGHINLHHLAHL(Aib)HHIL) 磷脂(二硬脂酰基磷脂酰乙醇胺)-聚乙二醇-TH(AGYLLGHINLHHLAHL(Aib)HHIL)
- python动态监控日志内容
- 安卓--记账软件课程设计
- 计算机技术包括云计算吗,云计算机技术有哪些
- 【MATLAB】绘制阶梯图、枝干图
- 奇迹按键精灵挂机脚本_奇迹脚本代码导入按键精灵后怎么使用?
- 火车头怎么采集图片-火车头采集图片并保存本地化
- 摩拜创始人套现15亿:你的同龄人,正在抛弃你+韩寒回应
热门文章
- 【leetcode记录03】动态规划
- SAP UI5 应用开发教程之六十 - SAP UI5 地图控件的一些高级用法试读版
- 【技术种草】介绍一款开源电商网站的购物车添加功能的实现
- SAP BTP SDK for Android 已经支持 Kotlin 了
- Rxjs takeWhile 和 filter 操作符的区别
- SAP CRM Fiori Simulation Pipeline 设计介绍
- 如何替换SAP Spartacus启动Component -app-root
- 通过一个实际例子理解Angular rxjs Observable的异步行为
- 如何创建HTML Mashup并插入到SAP Cloud for Customer标准页面里
- 试图使用removebg工具的在线网站去除图片背景时遇到的错误