开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js手机触屏左右滑动效果代码

要实现手机触屏左右滑动效果，可以使用JavaScript结合CSS来完成。以下是一个简单的示例代码，展示了如何实现这一效果：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swipe Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="swipe-container">
        <div class="swipe-item">Item 1</div>
        <div class="swipe-item">Item 2</div>
        <div class="swipe-item">Item 3</div>
        <div class="swipe-item">Item 4</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.swipe-container {
    display: flex;
    width: 400%; /* 假设有4个滑动项 */
    transition: transform 0.3s ease-in-out;
}

.swipe-item {
    flex: 1;
    min-width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    background-color: #f0f0f0;
    border-right: 1px solid #ccc;
}

JavaScript代码

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const container = document.querySelector('.swipe-container');
    let startX = 0;
    let currentTranslate = 0;
    let prevTranslate = 0;
    let animationID = 0;
    let currentIndex = 0;

    container.addEventListener('touchstart', touchStart);
    container.addEventListener('touchmove', touchMove);
    container.addEventListener('touchend', touchEnd);

    function touchStart(event) {
        startX = event.touches[0].clientX;
        cancelAnimationFrame(animationID);
    }

    function touchMove(event) {
        const currentX = event.touches[0].clientX;
        currentTranslate = prevTranslate + currentX - startX;
    }

    function touchEnd() {
        const movedBy = currentTranslate - prevTranslate;
        if (movedBy < -100 && currentIndex < 3) currentIndex += 1;
        if (movedBy > 100 && currentIndex > 0) currentIndex -= 1;
        prevTranslate = currentTranslate;
        setSliderPosition();
    }

    function setSliderPosition() {
        currentTranslate = -currentIndex * window.innerWidth;
        container.style.transform = `translateX(${currentTranslate}px)`;
    }
});

解释

HTML结构：创建一个包含多个滑动项的容器。
CSS样式：设置容器和滑动项的基本样式，并使用flex布局使滑动项水平排列。
JavaScript代码：
- 监听touchstart、touchmove和touchend事件。
- 在touchstart事件中记录初始触摸位置。
- 在touchmove事件中计算当前的滑动位置。
- 在touchend事件中根据滑动的距离决定是否切换到下一个或上一个滑动项，并更新滑动位置。

应用场景

移动应用：适用于需要在移动设备上进行左右滑动的界面，如图片轮播、菜单导航等。
网页设计：用于创建动态和交互式的网页布局。

优势

用户体验：提供流畅的手势操作，增强用户的交互体验。
灵活性：可以根据需要轻松添加或删除滑动项。
兼容性：适用于大多数现代浏览器和移动设备。

通过这种方式，你可以实现一个简单且高效的手机触屏左右滑动效果。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Bootstrap幻灯轮播如何支持触屏左右滑动手势？

最近ytkah在学习用bootstrap搭建网站，Bootstrap能自适应pc端和手机端，并且移动设备优先，适合现如今移动营销。...bootstrap是封装好的框架，需要某些功能只需调用相应的组件就可以，但有些还是没加入，比如幻灯轮播触屏左右滑动手势就不支持，大家用的设备基本是触屏的了，能用滑动交互在小屏幕上体验会更好，那么如何实现呢...一个比较简单的方法是增加一个滑动手势js插件：hammer.js，网上有很多cdn调用地址，像//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js，我们在head...下面是幻灯片的原始html代码 ...需要注意的是，jquery版本最好是1.9版本的jquery-1.9.1.min.js，否则可能在电脑上可以实现手势滑动，而在手机上无法触摸滑动　　javascript命令这个是关键，不会写不会改就不好玩了

3.7K5 0

js实现底部带圆点的左右滑动效果

2015-04-17 10:42:04 在一些商品展示和微信开发中经常会用到图片的展示和页面的滑动效果，前面我介绍了一种手机端上下滑动效果，今天我来给大家介绍一种手机端左右滑动并且底部有圆点，实心的圆点随着图片的变化而移动...来看看代码吧落帆亭实现的图片左右滑动底部带圆点...bullets = document.getElementById('position').getElementsByTagName('li'); 代码中用到了一个...swipe.js的文件，本站提供下载链接，需要的朋友可以下载。

7.9K2 0

基于swiper的手机端上下和左右滑动效果

2015-04-22 11:26:32 上一篇文章中我向大家介绍了基于swiper的手机端上下和左右滑动效果，但有时候在上下滑动的中间需要有左右滑动的效果，那么我就再来给大家介绍一种基于swiper的手机端上下滑动的同时还能够左右滑动效果...，来看一下代码。.../idangerous.swiper-2.1.min.js"> var mySwiper2 = new Swiper...，每个section为一个不同的页面，通过上下滑动来切换页面，在第二个sectoion中设置了左右滑动的功能，每一个div为一个页面，可以左右滑动，这里有一个不足之处就是左右箭头，当处于需要左右的第一个页面时左箭头不动...有兴趣的朋友可以尝试着修改一下达到这个效果。在来看一下js处代码，这部分代码与上一篇文章的js代码大致相同，还是贴出来让大家看看吧。

3.3K3 0

js带模糊效果的隐藏滑动侧边栏代码教程

简要教程 pushbar.js是一款带模糊效果的js隐藏滑动侧边栏插件。pushbar.js能制作上下左右四个方向的滑动侧边栏效果，并且在侧边栏菜单显示的时候，主页面会带有炫酷的模糊特效。...使用方法在页面中引入pushbar.js和pushbar.css文件。... js/pushbar.js"> HTML结构该js...带模糊效果的隐藏滑动侧边栏插件 Tiny javascript plugin for creating sliding drawers in web apps <div...var pushbar = new Pushbar({ blur:true, overlay:true, }); 配置参数该js隐藏滑动侧边栏菜单的可用配置参数如下： blur：是否在打开侧边栏时主页面带模糊效果

6.2K4 0

vue-awesome-swiper实现轮播图片

前言最近在学习Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台时，学习到第三章 3.7-首页顶部轮播图片（vue-swipper...Swiper目前已经更新到版本5了，Swiper常用于移动端网站的内容触摸滑动，Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。...Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！...} } } } } 我在项目中暂时只放了3张用于轮播的图片，每隔3秒钟轮播另外一张图片，当在浏览器中左右滑动鼠标或者在手机端左右滑动时会看到不同的图片...(Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台-B站视频全栈开发王者荣耀手机端官网和管理后台-Github源代码 Swiper中文网地址为

5.3K4 0

JavaScript之移动端网页特效(1)

学习目标: 触屏事件概述: 移动端浏览器兼容性较好,我们不需要考虑以前JS的兼容性问题,可以放心的使用原生JS的书写效果,但是移动端也有自己独特的地方,比如触屏事件touch(也称触摸事件),Android...touch对象代表一个触摸点,触摸点可能是一根手指,也可能是一根触摸笔.触屏事件可相应用户手指(或触控笔),对屏幕或者触控板操作常见的触屏事件如下: 试着写一下,切换成模拟手机调试再来试试触摸滑动事件...11 往左划也一样,但是现在还没做拖动效果下面要做小圆点跟随图片变化的效果,也引出了新的知识点: classList属性 classList属性是HTML5新增的一个属性,返回元素的类名...接下来就是手指滑动轮播图的部分: 移动也做好了,但是我们平常手机里的轮播图的滑动效果并不是这样的,而是当我们滑动很小距离时,图片会回弹回去,滑动的距离大了才会下一张,所以我们要根据moveX...但其实还是有很多bug...比如滑动着就消失了的小圆点,图片滑动到最后返回时还是没衔接上,但是太累了.明天复盘一次

2.6K2 0

大屏时代的生态变迁，看平板手机的拇指热键与界面布局

大屏手机填补了传统触屏手机与平板电脑之间的空白地带，有些大屏手机的屏幕甚至达到7英寸之巨，因此也获得了一个略显蹩脚的绰号——平板手机。 ? 这类设备虽然有着巨大的身形，但人们仍然会将其作为手机使用。...用户可以直接点击Tab本身，也可以通过左右滑动操作来切换Tab。这种模式通常适用于Tab导航。...在小屏手机上，用户可以相对轻松地点击顶部Action Bar中的Tab；而在平板手机上，直接在内容区域左右滑动实现切换显然是最为便捷的。...在屏幕左右边缘放置的交互元素很可能处于平板手机的拇指热区之外，但无论怎样也比放置在顶部更加容易操作。你也可以为这种模式添加横滑展开的手势，只要不与界面整体的横滑回退效果产生冲突即可。...总体上讲，功能控件位于屏幕左右边缘的模式更适用于双手拇指同时操作的情况，因此在平板电脑的界面中更为常见。本文选自《触类旁通：多终端时代的触屏界面设计》

2.4K1 0

微信小程序从零开始开发步骤（五）轮播图

Swiper是滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。是目前应用较广泛的移动端网页触摸内容滑动插件。实例： ?...swiper-item> 第二步：js...autoplay Boolean false 是否自动切换 interval Number 5000 自动切换时间间隔 duration Number 500 滑动动画时长

1.8K3 0

10-移动端开发教程-移动端事件

如何用户的手指从触屏设备的边缘移出了触屏设备，也会触发 touchend 事件。 touchend 事件的 target 也是与 touchstart 的 target 一致，即使已经移出了元素。...：左右滚动：pageX 明显大于 clientX 4....触摸手势封装相关的框架及事件手势相关的事件一般就是tap类（触屏）和滑动（swipe)事件两类。...Zepto.js的touch模块中封装了手势相关的代码。...触屏事件：tap、singleTap、doubleTap、longTap(>750ms）滑动事件：swipe、swipeLeft,、swipeRight,、swipeUp,、swipeDown <style

6.8K8 0

NPlayer 支持移动、平板、桌面，高度可定制的弹幕视频播放器

你可以自定义任意多个断点，不仅仅是兼容移动端，只要愿意，你可以非常轻松的兼容手机竖屏、手机横屏、平板等设备。...还可以自定义任意多个不同的断点，例如下面提到的 Mini 模式或扩展手机横屏模式，都可以通过自定义断点来轻松实现。 NPlayer 交互和布局是分离的。...一般我们在手机上看视频，单击视频会显示控制条，双击是播放暂停视频，左右滑动可以快进或快退视频。而在电脑上单击视频是播放暂停，双击是全屏，键盘上的左右快捷键可以快进快退视频。...NPlayer 支持上面提到的两套交互，可以通过 isTouch 参数来设置播放器是使用哪一套交互，默认情况下会在播放器初始化时自动检测是否是触屏，如果是将使用触屏交互逻辑否则使用键鼠交互。...上面省略了视频容器和 Mini 容器的 CSS 代码。

3.7K3 0

10-移动端开发教程-移动端事件

如何用户的手指从触屏设备的边缘移出了触屏设备，也会触发 touchend 事件。...左右滚动：pageX 明显大于 clientX ? 4....触摸手势封装相关的框架及事件手势相关的事件一般就是tap类（触屏）和滑动（swipe)事件两类。...Zepto.js的touch模块中封装了手势相关的代码。...触屏事件：tap、singleTap、doubleTap、longTap(>750ms）滑动事件：swipe、swipeLeft,、swipeRight,、swipeUp,、swipeDown <style

6.4K7 0

前端成神之路-WebAPIs07

07 - Web APIs 学习目标: 能够写出移动端触屏事件能够写出常见的移动端特效能够使用移动端开发插件开发移动端特效能够使用移动端开发框架开发移动端特效能够写出 sessionStorage...触屏事件 1.1.1 触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。...比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件如下： ?...JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

3.6K1 0

如何用Sonic云真机打王者

，还得继续深究下去…随着iOS远控的面世，我本着测试用户反馈的效果。...获得的反馈基本是iOS的投屏清晰度高，FPS能达到30，但是触控延迟也比较高这是因为跟安卓触控原理不一致。...iOS的触控体验我是监听鼠标点击与松开完成一次滑动事件，才发送一个滑动指令给Agent执行，里面包含两次移动的坐标信息。...但是安卓的触控经过调用API的方式，实时监听鼠标移动轨迹来发送指令给手机，所以触控体验会更佳、更流畅。但是iOS的话，这种方式在webdriveragent里面很不好实现，目前也在探索之中。...目前sonic的安卓投屏解决方案是minicap，我也做过对比8.Minicap将部分压力放在agent处理，对手机负荷不高，兼容性不太好，小米尤其严重9.Scrcpy将投屏处理集中在手机端，渲染压力放在了前端上

1.7K2 0

界面劫持之触屏劫持

01 触屏劫持发展过程移动智能终端设备由于体积限制，一般都没有鼠标、键盘这些输入设备，用户更多的操作是依靠手指在触屏上的点击或滑动等动作完成。...通过将一个不可见的iframe覆盖到当前网页上就可以劫持用户的触屏操作。由于手机屏幕范围有限，手机浏览器为了节省空间会把地址栏隐藏起来，因此在手机上的视觉欺骗更容易实施。...部分核心代码图片测试流程完整代码连接（https://github.com/ggfhgg/Tapjacking_Android）图片图片图片图片图片图片04 触屏劫持防御方法不点击任何不明网站、App...苹果手机在使用Safari浏览器的时候，遇到不明情况的提示框或页面，一定要确认地址栏的地址是否隐藏以及是否正确，若网站上含有触屏劫持，则大概率会添加假的地址栏做误导，需谨慎认清。...安卓手机要多加注意提示框弹出前后，手机系统给出的提示，由于不同安卓手机有很大差别触屏劫持在不同手机上会有不同的效果，但在获取权限时系统都会有好几步的确认工作，所以要多加注意之中细微的差别。

3322 0

「JavaScript 」动画基础 - 03

触屏事件1.1.1 触屏事件概述移动端浏览器... 请注意，本文编写于 2082 天前，最后修改于 173 天前，其中某些信息可能已经过时。 1.1....触屏事件 1.1.1 触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。...比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。...常见的触屏事件如下： 1.1.2 触摸事件对象（TouchEvent） TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。

1.2K2 0

前端开发者不得不知道的18个常用的网站

： 4.mongoose mongoose是在node.js异步环境下对mongodb数据库进行便捷操作的对象模型工具关于mongodb可参考：教零基础女朋友学MongoDB 界面如下： 5.Vue.js...Vue.js是一套用于构建用户界面的渐进式框架。...界面如下： 9.Swiper中文网Swiper常用于移动端网站的内容触摸滑动Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端Swiper能实现触屏焦点图、触屏Tab...切换、触屏多图切换等常用效果界面如下： 10.Animate.css Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库。...非常适合强调，首页，滑块和引导注意的提示很多前端开发都知道的一个基于css3 animation动画库，库中预设的动画效果几乎满足了所有日常开发中的需求界面如下： 11.Vant Vant是有赞开源的一套基于

1.4K1 0

移动web开发问题和优化小结

我自己也在手机上粗略试过，确实有那么一回事，平常看博客，5分钟左右少1%，用了硬件加速3分钟左右就少1%，大家注意合理使用。...2.动画和过渡能用css3解决的，就不要使用js。如果是复杂的动画可以使用css3+js（或者html5+css3+js）配合开发，效果只有想不到，没有做不到。...PS：过度压缩图片大小影响图片显示效果，可能会使得图片变得模糊，一般来说，品质在60左右就差不多了！...9.消除transition闪屏 PS：这个问题，我近段时间开发，貌似不加上这个代码也没什么影响，但是以前就是要求加，就加上了，现在没加上，也没反馈有什么问题！...touchstart和touchend的移动距离来判断是左右滑动或者上下滑动！

2.1K2 1

两周“学会”bootstrap搭建一个移动站点

一直想着用bootstrap搭建网站，它的自适应、元素封装完善、现成的Glyphicons字体图标，省去很多的css、js、ui的工作，可以快速搭建一个客户需要的站点。...当然做得比较粗糙，效果图在文章尾部。　　...幻灯片banner、次导航、文章列表、tag标签、转化引导、主业分类、团队介绍、联系方式，那我们就按这样设计　　1.按照bootstrap中文网bootcss.com官方文档，首先我们先引用css和js...用大的body把页面包围起来　　2.用导航条设计一个头部导航，用栅格系统column分为散列，左侧是主页小房子标志，中间是logo，右侧是下拉导航菜单　　3.用carousel.js...做一个幻灯片轮播，如果想加入手势滑动效果参考ytkah之前写的这篇文章：Bootstrap幻灯轮播如何支持触屏左右滑动手势？

2.9K6 0

移动端开发总结

我自己也在手机上粗略试过，确实有那么一回事，平常看博客，5分钟左右少1%，用了硬件加速3分钟左右就少1%，大家注意合理使用。...2.动画和过渡能用css3解决的，就不要使用js。如果是复杂的动画可以使用css3+js（或者html5+css3+js）配合开发，效果只有想不到，没有做不到。...PS：过度压缩图片大小影响图片显示效果，可能会使得图片变得模糊，一般来说，品质在60左右就差不多了！...9.消除transition闪屏 PS：这个问题，我近段时间开发，貌似不加上这个代码也没什么影响，但是以前就是要求加，就加上了，现在没加上，也没反馈有什么问题！...touchstart和touchend的移动距离来判断是左右滑动或者上下滑动！

2.7K1 0

实战文章！超实用！教你如何利用数据「分析用户行为，完善产品设计」

跟PC情况相似，用户触达率随着页面层级加深而减小。下例的H5小游戏里，用户先进入一个地图首页，点击“开始游戏”会跳转到游戏页面，再进行性别选择和操作提示，最后才到达游戏。...下例的H5小游戏开始前有操作方法提示，玩法是晃动手机（像控制真车方向盘一样）控制小车左右移动躲避障碍物。但是有19%的用户选择点击消除障碍物，12.7%的用户选择点击拖动小车，直接忽略教程。...用户习惯滑动切换，不喜欢向左的点击下例H5专题页面，用户可以手势滑动切换游戏，也可以点击下面的导航切换游戏。93%的用户选择手势滑动，只有7%的用户选择点击导航。...下例H5专题页面，用户可以点击左右按钮或者手势滑动来360°查看新车。所有手势中，左点击只有10.1%，右点击有41.3%，手势滑动占48.6%。有行为触发的icon要设计的足够醒目易懂。...之前内部的一项网速测试算出访问我们专题的手机平均网速只有93K/s，如果容忍时间是5秒的话，我们的网页加起来需要控制在465K以内。建议首屏加载在465K以内，剩下的按需加载或者延时加载。

8708 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭