js代码
$(function() {
function judge() {
var startx;//让startx在touch事件函数里是全局性变量。
var endx;
var el = document.getElementById('io');//触摸区域。
function cons() { //独立封装这个事件可以保证执行顺序，从而能够访问得到应该访问的数据。
if (startx > endx) { //判断左右移动程序
alert("left");
} else {
alert("right");
}
}
el.addEventListener('touchstart', function (e) {
var touch = e.changedTouches;
startx = touch[0].clientX;
starty = touch[0].clientY;
});
el.addEventListener('touchend', function (e) {
var touch = e.changedTouches;
endx = touch[0].clientX;
endy = touch[0].clientY;
cons(); //startx endx 的数据收集应该放在touchend事件后执行，而不是放在touchstart事件里执行，这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的，所以在此函数中都可以访问得到，所以只需要注意事件执行的先后顺序即可。
});
}
judge();
})
html的话只要id对应就可以了
<body>
<div style="width: 100%;height: 3000px;background: #08c;" id="io">
</div>
</body>
相关推荐
【纯 js 仿手机桌面左右滑动切换图片】是一个典型的前端开发项目，主要涉及JavaScript语言，用于实现类似手机桌面的图片浏览效果，用户可以通过左右滑动屏幕来切换不同的图片。这个项目的核心技术主要包括以下几个...
在JavaScript开发中，实现手机页面的左右滑动切换效果是一项常见的任务，特别是在移动优先的设计理念下。这个项目专注于创建一个高效且兼容主流浏览器的解决方案。本文将深入探讨如何利用JavaScript来实现这一功能，...
该插件主要利用HTML5的特性，结合JavaScript库JQUERY，实现了在手机触屏设备上通过左右滑动手势来切换图片的功能。JQUERY作为一个轻量级、高性能的JavaScript库，简化了DOM操作，使得开发者能够更加便捷地实现动态...
手机端滑动的核心在于监听用户的触摸动作，这通常通过JavaScript的`touchstart`、`touchmove`和`touchend`事件来完成。当用户手指触碰屏幕时触发`touchstart`，手指移动时触发`touchmove`，手指离开屏幕时触发`...
在JavaScript编程领域，实现手机触屏的左右滑动和上下滑动是一项常见的需求，尤其是在开发移动Web应用或者响应式网站时。本教程将详细介绍如何利用JavaScript来实现这一功能，同时确保在电脑上通过鼠标也能模拟相同...
"手机wap触屏网站左右滑动特效js代码"就是针对这一需求的解决方案，它利用JavaScript技术来实现触屏设备上的滑动导航功能。 首先，我们需要理解JavaScript在触屏设备中的作用。JavaScript是一种强大的客户端脚本...
你需要计算手指在屏幕上的移动距离，判断是否达到滑动的阈值，然后触发相应的滑动行为。 ```javascript var touchStartX = 0; var touchEndX = 0; $(document).on('touchstart', '.slide-item', function(event) {...
"js左右两侧滑动展开菜单代码"是一个实现这种效果的源码示例，它主要用于手机端应用，旨在提供一个便捷的侧边菜单功能，允许用户在页面的左侧或右侧滑动以展开或收起菜单。这个功能在许多现代移动应用程序和响应式...
HTML5全屏图文左右滑动切换特效是一种常见的网页动态效果，它通过利用HTML5和jQuery技术，为用户提供了一种优雅的方式来展示全屏的图片和文本，同时允许用户通过左右滑动来浏览不同的内容块。这种特效在现代网页设计...
CSS3的过渡（transitions）和动画（animations）效果被用来平滑地改变图片的显示状态，如淡入淡出或左右滑动效果。 JavaScript部分可能包含了一个自定义的滑动插件，该插件利用jQuery来监听触屏事件。例如，它会...
标题“支持移动浏览器(手机、ipad等)左右滑动切换tab标签”描述了一种常见且实用的交互设计，即在移动设备上通过左右滑动来切换页面上的Tab标签。这种功能使得用户能够轻松浏览多个相关但独立的内容区域，而无需点击...
`jQuery`，作为一个广泛使用的JavaScript库，虽然默认不包含对触摸事件的处理，但可以通过各种插件来扩展其功能，比如本话题提到的"基于jQuery的手机触摸屏事件插件"。这个插件，名为`TouchSwipe`，专门设计用于识别...
在本文中，我们将探讨如何使用JavaScript来实现手机Web上的图片左右滑动效果，这个功能常见于许多手机端的网页应用，尤其是图片展示类的应用。我们将主要关注以下几个方面： 1. **布局与结构**： - 图片通常被包含...
// 左右滑动 if (deltaX > 0) { console.log('向右滑动'); } else { console.log('向左滑动'); } } else { // 上下滑动 if (deltaY > 0) { console.log('向下滑动'); } else { console.log('向上滑动');...
"鼠标左右滑动的手机页面切换效果"是这种设计理念的体现，它使得用户可以通过鼠标在网页上左右滑动来浏览不同的页面或内容板块，模拟手机触屏滑动的感觉。这一效果通常适用于响应式网站设计，确保在桌面端也能提供...
总的来说，html5手机触屏左右滑动切换特效是前端开发中一个实用且常见的功能，它结合了HTML5、CSS3、JavaScript和可能的jQuery技术，为用户提供了一种直观且流畅的交互方式。在实际项目中，开发者可以根据需求调整...
3. **过渡动画**：为了提升用户体验，图片在切换时通常会有过渡效果，比如淡入淡出、左右滑动等。这可以通过CSS3的`transition`属性来实现。 4. **无限循环**：为了使图片轮播看起来没有尽头，插件可能会实现无限...
本教程将深入讲解如何使用jQuery库在手机端实现左右滑动切换表单的功能，特别针对保险保单单号表单的填写场景。 首先，我们需要了解jQuery的核心概念。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、...
【标题】"仿网易左右滑动2"是一个与网页或APP界面设计相关的技术主题，它主要涉及用户交互体验中的滑动浏览功能。这种设计通常应用于新闻、文章或者图片展示类的应用，让用户通过简单的左右手势来切换不同的内容。在...
总之，这个"html5手机端上下左右滑动菜单代码"项目涵盖了前端开发中的重要技术，包括HTML5结构、CSS3样式和JavaScript交互。通过理解并实践这些技术，开发者可以创建更加动态、用户友好的移动界面。在实际应用中，还...