简单说下如何用jQuery 和 js原生代码获取touchstart,touchmove,touchend 坐标值: jQuery 代码: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var _x= _touch.pageX; }); $('#id').on('touchmove',function(e) { var _touch = e.originalEvent.t

目前AlloyFinger作为腾讯手机QQ web手势解决方案,在各大项目中都发挥着作用. 感兴趣的同学可以去Github看看:https://github.com/AlloyTeam/AlloyFinger 在腾讯,如:兴趣部落.QQ群.QQ动漫.腾讯学院.TEDxTencent. AlloyTeam.腾讯CDC等多个部门.团队和项目都在使用AlloyFinger.如下图所示: 基本上只要有图像裁剪.图像查看的地方都会使用到AlloyFinger.因此AlloyFinger也入选了腾讯code

前言 我们昨天初步了解了为什么会出现iScroll:[SPA]移动站点APP化研究之上中下页面的iScroll化(上),然后简单的写了一个demo来模拟iScroll,其中了解到了以下知识点: ① viewport相关知识点(device-width等) ② CSS3硬件加速 ③ 如何暂停CSS动画 ④ e.preventDefault导致文本不能获取焦点解决方案 ...... 当然,我们写的demo自然不能和iScroll本身的代码比肩,但是demo过程中我们也大概了解了iScroll代码过程

javascript(简称js)语言在移动前端应用很广.可以说必不可少,许多效果都是和js相关的.包括现在移动端的一些框架.jqmobi.jqtouch.sencha touch.jquerymobile等等.这些都是基于js而进行编写的.这篇暂时不讨论这些框架.以后会慢慢介绍其中的一两个框架的具体使用方法.这篇主要讨论一下部分常用的js事件在移动端的使用.举几个例子: 1.隐藏地址导航栏: <script type="text/javascript"> // 该函数由Si

移动端事件: // 手势事件 touchstart //当手指接触屏幕时触发 touchmove //当已经接触屏幕的手指开始移动后触发 touchend //当手指离开屏幕时触发 touchcancel // 触摸事件 gesturestart //当两个手指接触屏幕时触发 gesturechange //当两个手指接触屏幕后开始移动时触发 gestureend // 屏幕旋转事件 onorientationchange // 检测触摸屏幕的手指何时改变方向 orientationchange

[iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3496369.html 主题 iScroll HTML JavaScript ① viewport相关知识点(device-width等) ②  CSS3硬件加速 ③ 如何暂停CSS动画 ④ e.preventDefault导致文本不能获取焦点解决方案 ...... 当然,我们写的demo自然不能和

此手势库利用了手机端touchstart, touchmove, touchend, touchcancel原生事件模拟出了 rotate  touchStart  multipointStart  multipointEnd  pinch  swipe  tap  doubleTap  longTap  singleTap  pressMove  touchMove  touchEnd  touchCancel这14个事件回调给用户去使用.下面会讲述几个常用的手势原理实现. 先来看一下我对源码

目前AlloyFinger作为腾讯手机QQ web手势解决方案,在各大项目中都发挥着作用. 感兴趣的同学可以去Github看看: https://github.com/AlloyTeam/AlloyFinger 在腾讯,如:兴趣部落.QQ群.QQ动漫.腾讯学院.TEDxTencent. AlloyTeam.腾讯CDC等多个部门.团队和项目都在使用AlloyFinger.如下图所示: 基本上只要有图像裁剪.图像查看的地方都会使用到AlloyFinger.因此AlloyFinger也入选了腾讯cod

在开发Canvas绘画应用(三):实现对照绘画中,我们实现了视图引导的第一部分,这一篇我们来完成第二部分,即将图片直接拖到画布上进行绘画. ✁ 拖放如何实现? [拖放的基本概念]:创建一个绝对定位的元素,使其可以用鼠标或手指移动. 注意,为了使元素能被拖放,它必须是绝对定位的. 然后,我们需要填充我们的 touchF 函数来实现拖动功能,添加了 this.dragging 用于判断是否是拖动状态,只有当 touchmove 触发的时候才为 true.另外,当拖动的时候,需要改变目标对象的位置,通

这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online-game/ github地址:https://github.com/Yuan-Yiming/2048-online-game ==================================================================== 下面简单分析一下JS代码: 1.游

body { margin:; } .hearder { width: 100%; height: 150px; position: relative; } ul { list-style: none; padding:; width: 500%; height: 100%; overflow: hidden; margin-left: -200%; } ul>li { width: 20%; height: 100%; display: inline-block; } ul>li { flo

C#基础教程 第一章       C#语言基础 本章介绍C#语言的基础知识,希望具有C语言的读者能够基本掌握C#语言,并以此为基础,能够进一步学习用C#语言编写window应用程序和Web应用程序.当然仅靠一章的内容就完全掌握C#语言是不可能的,如需进一步学习C#语言,还需要认真阅读有关C#语言的专著. 1.1      C#语言特点 Microsoft.NET(以下简称.NET)框架是微软提出的新一代Web软件开发模型,C#语言是.NET框架中新一代的开发工具.C#语言是一种现代.面向对象的语

JQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var _x= _touch.pageX; }); $('#id').on('touchmove',function(e) { var _touch = e.originalEvent.targetTouches[0]; var _x= _touch.pageX; }); $('#id').on('touc

$('#id').on('touchstart',function(e) { ].pageX; }); JQuery如上. document.getElementById("id").addEventListener("touchstart",function(e){ ].pageX; ].pageY; console.log("start",_x) }) 原生如上. 一般我们取第一个手指的坐标,如果有其他要求可能 需要判断手指数量 ){ //.

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend. 一开始触摸事件touchstart.touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件.因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时

在pc端,我们通常使用$(window).scroll()事件来监听元素的位置,来做一些入场动效,如: $(window).scroll(function(){ var panel3Move = document.getElementById('panel3').offsetTop <= ($(window).scrollTop() + 656); panel3Move && move('.panel1-man .man2').set('opacity', '1').duration

滑动屏幕    touchstart:接触屏幕时触发,touchmove:活动过程触发,touchend:离开屏幕时触发 首先获取手接触屏幕时的坐标X,Y //获取接触屏幕时的X和Y$('body').bind('touchstart',function(e){ startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY; }); 然后获取滑动的坐标,并使用后

关于这三个移动端的事件,详细的资料网上一搜一大片,我就不浪费时间了 1.移动端长按事件 var timer = null; $(ele).on('touchstart',function(){ timer = setTimeout(function(){ alert("我是长按事件!") },800); }); $(ele).on('touchend',function(){ clearTimeout(timer); }); 说明:通过定时器模拟长按事件,这个例子基于jQuery,[e

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend.一开始触摸事件touchstart.touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件.因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时候

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主要是触摸事件:touchstart.touchmove和touchend. 一开始触摸事件touchstart.touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件.因为iOs设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时