mobile touch 备用

 1 var _scrollIndex=1;
 2 function scrollPage(){
 3     var _contentEle = $(‘.view-container‘),_viewEle = _contentEle.find(‘.view‘);
 4     var _iconEle = $(‘.downIconArror‘);
 5     var _view_port = $(‘.view-port‘);
 6     var _touchEvents = {
 7         ‘pageYStart‘:‘‘,
 8         ‘pageYEnd‘:‘‘,
 9         ‘touchstart‘:function(event){
10             event.preventDefault();
11             var _touch = event.touches[0],_this = _touchEvents;
12             _this.pageYStart = _touch.pageY;
13             _view_port[0].addEventListener(‘touchmove‘,_this.touchmove,true);
14             _view_port[0].addEventListener(‘touchend‘,_this.touchend,true);
15         },
16         ‘touchmove‘:function(event){
17             event.preventDefault();
18             var _touch = event.touches[0],_this = _touchEvents;
19             _this.pageYEnd = _touch.pageY;
20         },
21         ‘touchend‘:function(event){
22             var _this = _touchEvents;
23             var _distance = _this.pageYEnd-_this.pageYStart;
24             if(_distance>50){
25                 swipe.down();
26             }
27             if(_distance<-50){
28                 swipe.up();
29             }
30             _view_port[0].removeEventListener(‘touchmove‘,_this.touchmove);
31             _view_port[0].removeEventListener(‘touchend‘,_this.touchend);
32         }
33     };
34     _view_port[0].addEventListener(‘touchstart‘,_touchEvents.touchstart);
35     var swipe = {
36         up:function(){
37             var _this = _contentEle;
38             var _initTransY = getTransform(_this);
39             if(Math.abs(_initTransY)==(_viewEle.length-1)*_viewEle.height()){
40                 return;
41             }
42             if(Math.abs(_initTransY)==(_viewEle.length-2)*_viewEle.height()){
43                 _iconEle.hide();
44             }else{
45                 _iconEle.show();
46             }
47             _scrollIndex++;
48             scrollPageAnimate(_scrollIndex);
49             _this.animate({‘margin-top‘:parseInt(_initTransY-_viewEle.height())},500);
50         },
51         down:function(){
52             var _this = _contentEle;
53             var _initTransY = getTransform(_this);
54             _iconEle.show();
55             if(_initTransY==0){
56                 return;
57             }
58             _scrollIndex--;
59             scrollPageAnimate(_scrollIndex);
60             _this.animate({‘margin-top‘:parseInt(_initTransY+_viewEle.height())},500);
61         }
62     }
63 }
时间: 2024-11-06 18:27:56

mobile touch 备用的相关文章

mobile touch event

touch.js 众所周知,mobile与pc 前端开发的不同中,有一点就是事件的不同,mobile上有touchstart,touchmove,touchend等,而pc上用最多的应该还是我们的click事件.mobile上,自己又喜欢用zepto.js库(喜欢有时候就是一种先入为主的感觉),但是zepto-touch又不争气,有这那的问题(比如穿透什么的).只好抛弃它,fastclick很好用,只是只有对click事件的加速,所以把tap.js的代码拿来自己改了改,增加了swipeleft和

触屏touch事件记录

一.chrome中的Remote Debugging 一开始并没有用这个调试,不过后面需要多点触碰,可chrome模拟器中我没看到这个功能.突然看到了Remote Debugging,网站需要FQ才能浏览. 1)以我的红米为例,首先要打开USB调试 2)手机连接电脑,打开PC的chrome,输入“chrome://inspect”,“Discover USB devices”这里要打勾,我打开这个页面的时候默认就勾上了. 手机上面也要安装chrome,下面“NOTE 1LTE”就是我的手机,已经

精通JavaScript--10移动设备JavaScript开发

代码清单10-3 访问来自触摸传感器的数据 1 //在页面上创建一个<p>元素,用以显示当前屏幕上的接触总数量 2 var touchCountElem = document.createElement("p"); 3 4 //定义一个事件处理函数.当一个与接触相关的事件发生时,执行此函数 5 function handleTouchEvent(event) { 6 7 //获得当前屏幕上所有接触的数组 8 var allTouches = event.touches, 9

前端组件库

//来源:http://www.cnblogs.com/liuzhibin/p/5944821.html 0. 前端自动化(Workflow) 前端构建工具 Yeoman – a set of tools for automating development workflow gulp – The streaming build system grunt – the JavaScript Task Runner F.I.S – 前端集成解决方案 前端模块管理器 Bower – A package

超级小的web手势库AlloyFinger发布

针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持,也不用再担心click 300ms的延迟了.拥有两个版本,无依赖的独立版和react版本.除了Dom对象,也可监听Canvas内元素的手势(需要Canvas引擎内置对象支持addEventListener绑定touch相关事件). 据不完全统计,目前AlloyFinger服务于:兴趣部落.QQ群.QQ动漫.腾讯学院.TEDxTencent. AlloyTeam.腾讯CDC等多个部门.团队和项目. 功能清单 极小的文件大小

2016年4月最佳的20款 jQuery 插件推荐

这个列表包括20个我们觉得是最有用的免费的 jQuery 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者分享您的意见,或者如果您知道的我们还没有包括的话,请与我们分享在下面的评论部分. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码

2.轮播/幻灯片

? AviaSlide    a unique jQuery Image slideshow plugin! http://aviathemes.com/aviaslider/ ESTRO SLIDER    swipe effect slider plugin演示地址:http://www.ffpic.com/demo/1102estro/index.html 下载地址:http://www.ffpic.com/jiaoben/121102076384.html lovelygallery  

【jQueryMobile】使用jQueryMobile实现滑动翻页的效果

滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前写的<[jQuery]论手机浏览器中拖拽动作的艰难性>(点击打开链接)中的观点一直,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢? 一.基本目标 在手机浏览器中的jQueryMobile框架页中现实滑动手势翻页的

Unity 官方教程 学习

Interface & Essentials Using the Unity Interface 1.Interface Overview https://unity3d.com/cn/learn/tutorials/topics/interface-essentials/interface-overview?playlist=17090 2.The Scene View https://unity3d.com/cn/learn/tutorials/topics/interface-essent