html上拉下拉查看文字内容,html5上拉下拉事件效果演示
一,下拉事件
html5下拉事件简单实例
html5下拉事件简单实例
未触发事件!
//全局变量,触摸开始位置
var startX = 0, startY = 0;
//touchstart事件
function touchSatrtFunc(evt) {
try
{
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = touch.pageX; //页面触点X坐标
var y = touch.pageY; //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
var text = 'TouchStart事件触发:(' + x + ', ' + y + ')';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchSatrtFunc:' + e.message);
}
}
//touchmove事件,这个事件无法获取坐标
function touchMoveFunc(evt) {
try
{
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = touch.pageX; //页面触点X坐标
var y = touch.pageY; //页面触点Y坐标
var text = 'TouchMove事件触发:(' + x + ', ' + y + ')';
if (y - startY < 100) {
text += '
下拉事件触发';
bindEvent(1);
}
//document.getElementById("ggimgid").style["webkitTransform"] = 'translate(0px,' + (y - startY) + 'px) scale(1) translateZ(0px)';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchMoveFunc:' + e.message);
}
}
//touchend事件
function touchEndFunc(evt) {
try {
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var text = 'TouchEnd事件触发';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchEndFunc:' + e.message);
}
}
//绑定事件
function bindEvent(f) {
if(f==1){
document.removeEventListener('touchstart', touchSatrtFunc, false);
document.removeEventListener('touchmove', touchMoveFunc, false);
document.removeEventListener('touchend', touchEndFunc, false);
}else{
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
document.addEventListener('touchend', touchEndFunc, false);
}
}
//判断是否支持触摸事件
function isTouchDevice() {
document.getElementById("version").innerHTML = navigator.appVersion;
try {
document.createEvent("TouchEvent");
//alert("支持TouchEvent事件!");
bindEvent(); //绑定事件
}
catch (e) {
//alert("不支持TouchEvent事件!" + e.message);
}
}
window.onload = isTouchDevice;
上拉事件
html5上拉事件简单实例
html5上拉事件简单实例
未触发事件!
//全局变量,触摸开始位置
var startX = 0, startY = 0;
//touchstart事件
function touchSatrtFunc(evt) {
try
{
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = touch.pageX; //页面触点X坐标
var y = touch.pageY; //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
var text = 'TouchStart事件触发:(' + x + ', ' + y + ')';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchSatrtFunc:' + e.message);
}
}
//touchmove事件,这个事件无法获取坐标
function touchMoveFunc(evt) {
try
{
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = touch.pageX; //页面触点X坐标
var y = touch.pageY; //页面触点Y坐标
var text = 'TouchMove事件触发:(' + x + ', ' + y + ')';
if (y - startY < -100) {
text += '
上拉事件触发';
bindEvent(1);
}
//document.getElementById("ggimgid").style["webkitTransform"] = 'translate(0px,' + (y - startY) + 'px) scale(1) translateZ(0px)';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchMoveFunc:' + e.message);
}
}
//touchend事件
function touchEndFunc(evt) {
try {
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var text = 'TouchEnd事件触发';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchEndFunc:' + e.message);
}
}
//绑定事件
function bindEvent(f) {
if(f==1){
document.removeEventListener('touchstart', touchSatrtFunc, false);
document.removeEventListener('touchmove', touchMoveFunc, false);
document.removeEventListener('touchend', touchEndFunc, false);
}else{
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
document.addEventListener('touchend', touchEndFunc, false);
}
}
//判断是否支持触摸事件
function isTouchDevice() {
document.getElementById("version").innerHTML = navigator.appVersion;
try {
document.createEvent("TouchEvent");
//alert("支持TouchEvent事件!");
bindEvent(); //绑定事件
}
catch (e) {
//alert("不支持TouchEvent事件!" + e.message);
}
}
window.onload = isTouchDevice;
html上拉下拉查看文字内容,html5上拉下拉事件效果演示相关推荐
- java的springboot项目操作阿里云OSS下载文件、查看文件内容、上传文件,自定义工具类
因为要从oss下载.查看.上传工具类,所以对这几个方法做了一个封装,已经经过测试,可以直接使用 1.yml添加上阿里云配置.添加maven配置 注意这里的objectName: xxx/xxx/,前面 ...
- html5上传视频和预览,HTML5 上传前预览
HTML5上传图片预览 请选择图片文件:JPG/GIF $("#file0").change(function(){ var objUrl = getObjectURL(this. ...
- html5+css3实现2D动画效果演示
这些代码主要实现的功能就是一些2D的动画效果,如平移动画,旋转动画等等. HTML5代码: <span style="font-size:18px;"><!doc ...
- linux 上使用wc -l命令快速查看文件内容有多少行,以及如何匹配指定字符查看多少行
1 linux的cat -n命令查看文件内容一共有多少行 1.cat -n命令查看文件多少行 cat -n filename 如:cat -n gallery_color_depth.txt - 2. ...
- 手机上传日志文件给服务器,手机内容远程上传到服务器
手机内容远程上传到服务器 内容精选 换一换 为加强对系统数据的容灾管理,云堡垒机支持配置日志备份,提高审计数据安全性和系统可扩展性.本小节主要介绍如何在系统配置OBS桶参数,将日志远程备份至OBS桶. ...
- 【Linux】查看文件内容的5个常用命令
前言 不管是在日常工作连接远程服务器中,还是在平时个人电脑使用中(如果使用的Mac OS 或 Linux系统的话),都离不开强大的Terminal终端. 比如,查看远程服务器上的程序运行日志,使用终端 ...
- 如何修改安卓界面上的图片和文字
安卓修改大师系列教程之<如何修改安卓应用中的网络下载的图片>.本视频通过专业的视角,来一步步介绍如何修改安卓界面上面的图片和文字,如果图片在安装包里面,相对修改比较容易,如果在网络上,需要 ...
- html中字体在上下边缘居中,图片与文字在一行上垂直居中的方法
不知大家在做网站的时候有没有遇到这样的情况:在一行上会插入一个小图标,然后在图标后面配上文字说明,可是发现往往图片和文字并不垂直居中,在一行上图片老是相对文字要偏上一些,显的很不好看,那么有没有办法使 ...
- html5上拉下拉刷新,APP 上拉加载,下拉刷新 介绍
开发APP时,很多时候都会用上,上拉加载数据,下拉刷新等功能,本文件介绍两种. 一种是原生APP自带的上拉加载,下拉刷新功能,一种是用JS 插件写的上拉加载,下拉刷新. 1.原生APP 的 上拉加载, ...
最新文章
- 货币换算软件 (MAC 软件开发)
- 网站性能调优开发工具: Lighthouse, Puppeteer 以及进阶部分丨 Google 开发者大会 2018...
- 容器技术之二.Docker的安装和常见问题
- android 撑满剩余空间,怎么让LinearLayout占据父布局的所有剩余空间
- 信息学奥赛一本通C++语言——1060:均值
- Ubuntu 安装 python-opencv
- 快速排序算法的优化思路总结
- java基础知识---IO常用基础操作(一)
- CSS - less
- 渗透测试-灰鸽子远控木马
- Java获取今天是星期几
- python按字母顺序排列_在python中检查字符串是否按字母顺序排列
- python用matplotlib画玫瑰_用Python matplotlib 怎么画风向玫瑰图 ,能给出程序的?
- MATLAB实现利用三个不共线的点绘制圆(包括圆心和半径的求解)
- 记住这三个方法,让你的钱越花越多
- Spring Boot使用@RepeatSubmit 防止重复提交
- utf-8 和gbk 编码区别
- JavaScript数组方法三板斧,100%的开发都得知道
- ffmpeg合并ts为mp4
- JavaScript-0811