手机浏览页面touch操作,解决touch事件和浏览器滚动条冲突问题;zepto,swipe事件。

加载三个js插件

<script src="./js/jquery/jquery.js"></script>
<script src="./js/jquery/swiper.min.js"></script>
<script src="./js/jquery/zepto.min.js"></script>

简单代码:操作一块元素的上下位移。

$("#js_showdown_show").on("swipeDown",function(){
    $(".js_showdown").stop();
    $("#js_showdown_show").stop();
    $(this).animate({
        marginTop: "171px"
    }, 500 );
    $(".js_showdown").animate({
        marginTop: "171px"
    }, 500 );
    document.addEventListener(‘touchmove‘, function (event) {
        event.preventDefault();
    }, false);
});

$(document).on(‘swipeUp‘,function(e){
    $(".js_showdown").stop();
    $("#js_showdown_show").stop();
    $(‘#js_showdown_show‘).animate({
        marginTop: "0px"
    }, 500 );
    $(".js_showdown").animate({
        marginTop: "0px"
    }, 500 );
    document.addEventListener(‘touchmove‘, function (event) {
        event.returnValue = true;
    }, false);
});

原文地址:https://www.cnblogs.com/richardcastle/p/8297393.html

时间: 2024-08-30 06:41:04

手机浏览页面touch操作,解决touch事件和浏览器滚动条冲突问题;zepto,swipe事件。的相关文章

借助IIS管理器--用手机浏览HTML页面

平时在电脑上写的HTML页面如果没有上线的话,想在手机上浏览效果是很难的,在实际工作中我们却非常希望能够用手机去测试HTML页面,毕竟很多的bug在PC端测不出来 首先,关于IIS管理器的安装,我们可以通过万能的百度来实现(我也不是特别懂这块):http://jingyan.baidu.com/article/19192ad853224ce53f570748.html 1.安装好以后,我们打开IIS管理器,找到"网站",鼠标点击右键,选择"添加网站".在网站名称里面

zepto的touch模块解决click延迟300ms问题以及点透问题的详解

大家都知道移动端的click事件会延迟300ms触发,这时大家可以使用zepto的touch模块,里面定义了一个tap事件,通过绑定tap事件,可以实现点击立即触发的功能. 那么,它的tap事件是怎么实现的呢?这是我们要解决的第一个问题. 第二个问题,大家都知道zepto的tap事件会有点透的问题,那么,点透如何出现,点透为什么会出现,点透问题如何解决等,这是我们要解决的第二个问题. 我们先来看tap事件是如何实现的? 查看touch.js代码,在最后的代码中有以下代码: ;['swipe',

Tomcat:解决Tomcat可以在eclipse启动,却无法显示默认页面的操作

解决Tomcat可以在eclipse启动,却无法显示默认页面的操作 今天在eclipse中配置好tomcat后访问不到它的主页,但是能运行自己的项目,一直找不到原因,百度之后最后解决了这个问题,总结如下: 原因在于eclipse是调用Tomcat的接口模拟tomcat而不是真正的启动它,因此显示不了Tomcat主页 解决办法如下: 一:双击控制台的Tomcat,如图所示: 二:修改以下两个地方: 三:若上图的单选框修改不了,如图所示: 那么最简单的解决办法就是:右击控制台的Tomcat选dele

HTML5做手机站页面字体显示很小的解决方法

原文:HTML5做手机站页面字体显示很小的解决方法 HTML5做手机站需要加上一部分代码,不然字体会显示很小的,经历了很久的不解才发现的,希望给大家一些帮助 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org

adb命令具体解释(二)——手机缺失sqlite3时操作数据库的多种解决方式

在android应用开发无处不在SQLite数据库的身影.那么在开发中怎么使用adb命令操作数据库的功能呢? 以下我们将完整的介绍与数据库操作相关的命令集及当手机缺少sqlite3的时候的多种解决方式. 1.当手机缺失sqlite3时,怎样操作数据库 先来看看手机缺失sqlite3时候的效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/7

Shell命令-文件及目录操作之touch、tree

文件及目录操作 - touch.tree 1.touch:创建文件或更改文件时间戳 touch命令的功能说明 touch命令用于创建新的空文件或改变已有文件的时间戳属性. touch命令的语法格式 touch [OPTION]... FILE...touch [参数选项] [文件] touch命令的选项说明 touch 选项不常用,就不细说了: touch命令的实践操作 范例1: 创建文件(文件事先不存在的情况) [[email protected] ~]# mkdir -p /test [[e

wpf 模拟3D效果(和手机浏览图片效果相似)(附源码)

原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依赖属性也不介绍.),个人认为,依赖属性这个东西,有百分之五十是为了3D而存在.(自己写的类似于demo的东西)先上图,无图无真相这是demo的整个效果图,可以用鼠标移动,触摸屏也可以手指滑动,图片会移动,然后移动结束,会有一个回弹的判断. <Window x:Class="_3Dshow.Wi

Zepto.js touch,tap增加 touch模块深入分析

1. touch库实现了什么和引入背景 click事件在移动端上会有 300ms 的延迟,同时因为需要 长按 , 双触击 等富交互,所以我们通常都会引入类似 zepto 这样的库.zepto 中touch库实现了 'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap' 这样一些功能. 2.touch库实现'swipe', 'swipeLeft',

Android 手机app 嵌入网页操作

1.主Activity的源代码: package com.jhtg.happyagent; import android.annotation.SuppressLint; import android.app.Activity; import android.graphics.Bitmap; import android.os.Bundle; import android.view.KeyEvent; import android.view.View; import android.view.W