精华内容
下载资源
问答
  • 在线Demo 最近装了个discuz论坛,趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'... var pullrefresh = { init : function() { var pos = {};......

    在线Demo

    最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/img/',不多说直接上代码

    var pullrefresh = {
    	init : function() {
    		var pos = {};
    		var status = false;
    		var divobj = null;
    		var contentobj = null;
    		var reloadflag = false;
    		$('body').on('touchstart', function(e) {
    			e = mygetnativeevent(e);
    			pos.startx = e.touches[0].pageX;
    			pos.starty = e.touches[0].pageY;
    		})
    		.on('touchmove', function(e) {
    			e = mygetnativeevent(e);
    			pos.curposx = e.touches[0].pageX;
    			pos.curposy = e.touches[0].pageY;
    			if(pos.curposy - pos.starty < 0 && !status) {
    				return;
    			}
    			if(!status && $(window).scrollTop() <= 0) {
    				status = true;
    				divobj = document.createElement('div');
    				divobj = $(divobj);
    				divobj.css({'position':'relative', 'margin-left':'-85px'});
    				$('body').prepend(divobj);
    				contentobj = document.createElement('div');
    				contentobj = $(contentobj);
    				contentobj.css({'position':'absolute', 'height':'30px', 'top': '-30px', 'left':'50%'});
    				contentobj.html('<img src="'+ STATICURL + 'icon_arrow.gif" style="vertical-align:middle;margin-right:5px;-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);"><span id="refreshtxt">下拉可以刷新</span>');
    				contentobj.find('img').css({'-webkit-transition':'all 0.5s ease-in-out'});
    				divobj.prepend(contentobj);
    				pos.topx = pos.curposx;
    				pos.topy = pos.curposy;
    			}
    			if(!status) {
    				return;
    			}
    			if(status == true) {
    				var pullheight = pos.curposy - pos.topy;
    				if(pullheight >= 0 && pullheight < 150) {
    					divobj.css({'height': pullheight/2 + 'px'});
    					contentobj.css({'top': (-30 + pullheight/2) + 'px'});
    					if(reloadflag) {
    						contentobj.find('img').css({'-webkit-transform':'rotate(180deg)', '-moz-transform':'rotate(180deg)', '-o-transform':'rotate(180deg)', 'transform':'rotate(180deg)'});
    						contentobj.find('#refreshtxt').html('下拉可以刷新');
    					}
    					reloadflag = false;
    				} else if(pullheight >= 150) {
    					divobj.css({'height':pullheight/2 + 'px'});
    					contentobj.css({'top': (-30 + pullheight/2) + 'px'});
    					if(!reloadflag) {
    						contentobj.find('img').css({'-webkit-transform':'rotate(360deg)', '-moz-transform':'rotate(360deg)', '-o-transform':'rotate(360deg)', 'transform':'rotate(360deg)'});
    						contentobj.find('#refreshtxt').html('松开可以刷新');
    					}
    					reloadflag = true;
    				}
    			}
    			e.preventDefault();
    		})
    		.on('touchend', function(e) {
    			if(status == true) {
    				if(reloadflag) {
    					contentobj.html('<img src="'+ STATICURL + 'icon_load.gif" style="vertical-align:middle;margin-right:5px;">正在加载...');
    					contentobj.animate({'top': (-30 + 75) + 'px'}, 618, 'linear');
    					divobj.animate({'height': '75px'}, 618, 'linear', function() {
    						window.location.reload();
    					});
    					return;
    				}
    			}                       
                     if(divobj != null)// fixed bugs by Nelson 20160818                    
                     {                       
                         divobj.remove();                        
                     }
    			divobj = null;
    			status = false;
    			pos = {};
    		});
    	}
    };
    
    function mygetnativeevent(event) {
    
    	while(event && typeof event.originalEvent !== "undefined") {
    		event = event.originalEvent;
    	}
    	return event;
    }
    

      

    转载于:https://www.cnblogs.com/fastmover/p/5629058.html

    展开全文
  • 无线端touch

    2014-07-03 15:40:10
    手机拖动 控件
  • 手机端TOUCH

    2015-04-23 11:10:00
    client / clientY:// 触摸点相对于浏览器窗口viewport的位置 pageX / pageY:// 触摸点相对于...identifier: // touch对象的unique ID event.preventDefault();//阻止浏览器默认事件,重要 touchstart: // ...

    client / clientY:// 触摸点相对于浏览器窗口viewport的位置

    pageX / pageY:// 触摸点相对于页面的位置

    screenX /screenY:// 触摸点相对于屏幕的位置

    identifier: // touch对象的unique ID

    event.preventDefault();// 阻止浏览器默认事件,重要

     

    touchstart:  // 手指放到屏幕上的时候触发

    touchmove:  // 手指在屏幕上移动的时候触发

    touchend:  // 手指从屏幕上拿起的时候触发

    touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详。。

     

    <div style='height:500px;width:100%; border:1px solid #000;' id='canvas'>

    <script>

    var canvas = document.getElementById('canvas');

    function touchStart(event){

    event.preventDefault();

    alert(123)

    }

    function touchMove(event){

    event.preventDefault();

    alert(456)

    }

    function touchEnd(event){

    event.preventDefault();

    alert(789)

    }

        canvas.addEventListener("touchstart", touchStart, false);

        canvas.addEventListener("touchmove", touchMove, false);

        canvas.addEventListener("touchend", touchEnd, false);

        canvas.addEventListener("touchCancel", touchCancel, false);

    </script>

     

     

    EG:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>

     <head>

    <title> New Document </title>

    <meta charset="gb2312" />

    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="MobileOptimized" content="320">

    <meta name="format-detection" content="telephone=no">

    <link rel="apple-touch-icon" href="touch-icon-iphone.png" />

    <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

    <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" /> 

     </head>

    <style>

    *{padding:0px;margin:0px; text-align:center;}

    .spirit {              /* 方块的class名称*/

             position: absolute;

             width: 50px;

             height: 50px;

             

    }

    </style>

     <body>

      <div id="id"style="position:FIXED;width:50px;height:50px; </div>

      <script>

    /*单指拖动*/

    var obj = document.getElementById('id');

    obj.addEventListener('touchmove', function(event) {

         // 如果这个元素的位置内只有一个手指的话

        if (event.targetTouches.length == 1) {

         event.preventDefault();// 阻止浏览器默认事件,重要 

            var touch = event.targetTouches[0];

            // 把元素放在手指所在的位置

            obj.style.left = touch.pageX-25 + 'px';

            obj.style.top = touch.pageY-25 + 'px';

            }

    }, false);

      </script>

     </body>

    </html>

    转载于:https://www.cnblogs.com/mrt-yyy/p/4449833.html

    展开全文
  • 手机的操作手势touch.js各个版本手机的操作手势touch.js各个版本手机的操作手势touch.js各个版本
  • 手机端touch事件

    2018-05-29 15:43:25
    前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定。原生:document.querySelector("#aa").addEventListener('touchmove', function(){...});...1.获取当前touch位置 $('#webch...

    前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定。

    目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现。

    但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touchmove,touchend。

    如何获取手指滑动时的坐标位置呢?

    直接使用event.clientX是不起作用的,要使用event.changedTouches[0].clientX才好,

    如果是jquery的event对象,使用event.originalEvent.changedTouches[0].clientX。


    原生:document.querySelector("#aa").addEventListener('touchmove', function(){...});

    document.getElementById("id").addEventListener("touchstart",function(e){
        var _x=e.touches[0].pageX;
        var _y=e.touches[0].pageY;
        console.log("start",_x);
    });
    document.getElementById("id").addEventListener("touchmove",function(e){
        var _x=e.touches[0].pageX;
        var _y=e.touches[0].pageY;
        console.log("move",_x);
    });
    document.getElementById("id").addEventListener("touchend",function(e){
        var _x=e.changedTouches[0].pageX;
        var _y=e.changedTouches[0].pageY;
        console.log("end",_x);
    });

    jq:  $(".aa").on("touchmove",function (e) {...};

    1.获取当前touch位置

     $('#webchat_scroller').on('touchstart',function(e) {

          var touch = e.originalEvent.targetTouches[0];

          var y = touch.pageY;

          });

          $('#webchat_scroller').on('touchmove',function(e) {

          var touch = e.originalEvent.targetTouches[0];

          var y = touch.pageY;

          });

         $('#webchat_scroller').on('touchend',function(e) {

           var touch = e.originalEvent.changedTouches[0];

          var y = touch.pageY;

       });

    展开全文
  • 手机touch事件

    2019-04-25 15:39:35
    touch是移动端的一组触摸事件: touchstart 当手指触摸屏幕的时候触发 touchmove 当手指在屏幕来回的滑动时候触发 touchend 当手指离开屏幕的时候触发 touchcancel 当被迫终止滑动的时候触发(来电,弹消息) 利用...

    touch是移动端的一组触摸事件:

    1. touchstart 当手指触摸屏幕的时候触发
    2. touchmove 当手指在屏幕来回的滑动时候触发
    3. touchend 当手指离开屏幕的时候触发
    4. touchcancel 当被迫终止滑动的时候触发(来电,弹消息)
      利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件

    使用touch

    1. 绑定事件:box.addEventListener(‘touchstart’,function () { });
      手机端原生JS推荐用addEventListener添加事件;

    2. 事件对象e:
      名字:TouchList------触摸点(一个手指触摸就是一个触发点,和屏幕的接触点的个数)的集合
      changedTouches 改变后的触摸点集合
      targetTouches 当前元素的触发点集合
      touches 页面上所有触发点集合

    3. 触摸点集合在每个事件触发的时候会不会去记录触摸
      changedTouches 每个事件都会记录
      targetTouches,touches 在离开屏幕的时候无法记录触摸点

    4. 分析滑动实现的原理:
      4.1 就是让触摸的元素随着手指的滑动做位置的改变
      4.2 位置的改变:需要当前手指的坐标
      4.3 在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点
      4.4 clientX clientY 基于浏览器窗口(视口)
      4.4 pageX pageY 基于页面(视口)
      4.4 screenX screenY 基于屏幕

    展开全文
  • 手机 touch 事件

    2014-08-19 18:39:02
    http://www.myexception.cn/web/1600832.html
  • 主要介绍了JS手机端touch事件计算滑动距离的方法,结合实例形式分析了javascript响应手机屏幕上touch事件计算滑动距离的相关操作技巧,需要的朋友可以参考下
  • 手机端touch.js应用

    2019-09-17 21:46:28
    <script src="js/touch.js"></script> js代码如下: touch.on('#holdtion','hold tap doubletap',function(ev){ alert("长按"); }); html代码如下: <img ...
  • JS手机端touch事件计算滑动距离的方法
  • 使用原生的touchstart总是单击、长按有冒泡冲突事件,发现百度在几年开源的touch.js库,放在现在来解决手机的操作手势,仍然很好用。
  • 这次的大作业里面想用 touch事件 做一个在移动端可以拖拽的小图标,嘿嘿,但是还没用到过,然后就参考学习了...总的来说 移动端的touch事件 和 PC的移动拖拽事件的原理一样: touchstart事件 ———— onmusedown ...
  • 最近一直都在做手机网站的项目,会经常遇到手机屏幕触摸无交互效果,今天在一篇文章中看到模拟网页hover效果的例子拿出来和大家分享下,已经使用效果还不错,大家可以根据下面的案例学下: 一、css样式: <...
  • 使用Sencha Touch加载服务器数据。

    千次阅读 2014-04-30 09:22:17
    本实例演示了Sencha Touch读取服务器发来的Json数据。 文档结构如下: app.js代码如下: Ext.require(['Ext.form.Panel', 'Ext.data.Store', 'Ext.dataview.DataView']); Ext.application({ name:'MyApp...
  • react 手机端touch 图片轮播

    千次阅读 2016-11-10 15:53:19
    import React, { Component, PropTypes } from 'react';const styles = require('./DoctorSchedulesCard.scss');let startX; export default class DoctorSchedulesCard extends Component { static propTypes = {
  • Three.js 手机 touch用法

    千次阅读 2020-01-16 13:56:40
     // 判断是在移动端还是在pc  var os = function () {  var ua = navigator.userAgent,  isWindowsPhone = /(?:Windows Phone)/.test(ua),  isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone, ...
  • readhubtron, 一个Electron多版的readhub.me的客户端,支持Touchbar.
  • 原因,vantdatetimepicker 在事件监听上 用了touch事件 解决方案可以使用 https://github.com/hammerjs/touchemulator
  • 通过监听canvas上的touch事件,在canvas上作图<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, ...
  • pc点击事件及移动端touch事件

    千次阅读 2018-09-10 16:35:47
    1.pc 鼠标点击事件 三种:mousedown、mousemove、mouseup 在写事件的过程中,一定要在事件前面添加on 比如: // dright.onmousedown = function(e){ // dright.onmousemove = mousemove(e); // dright....
  • TOUCH.JS手势操作,例如一指拖动、两指旋 基本事件: touchstart//手指刚接触屏幕时触发 touchmove//手指在屏幕上移动时触发 touchend//手指从屏幕上移开时触发 touchcancel//触摸过程被系统取消时触发(少...
  • IOS7.0 safari 滚动滚动条的时候, 最后手指放开 (scroll 总是在 touchend后面,所以要用 setTimeout) touchstart touchmove(多个) touchend scroll(一个)IOS8.4 safari 滚动滚动条的时候 touchstart touchmove...
  • //当某种touch事件非正常结束时触发 这4个事件的触发顺序为: touchstart -> touchmove -> touchend ->touchcancel overflow 属性 overflow 属性规定当 内容溢出元素框时 发生的事情 visible 默认值。内容...
  • -webkit-touch-callout : none ; -webkit-user-select : none ; } #test { margin-left : 70% ; width : 100px ; border-color : #F70000 ; border : 2px solid ; } style > < script...
  • 实现原理:获取触摸首尾2点的坐标,Math.atan2获得2点连成的直线与x轴正方向的夹角,从而得到滑动的方向!原理图: <!doctype html> <html> <head> <meta charset="utf-8">...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,086
精华内容 434
关键字:

touch端