开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

手机滑屏js实例

以下是一个使用JavaScript实现简单手机滑屏效果的示例代码：

一、基础概念

事件监听
- 在这个实例中，主要涉及到触摸事件（touchstart、touchmove、touchend）。这些事件用于检测用户在屏幕上的触摸动作开始、移动和结束。

坐标计算
- 通过获取触摸点的起始坐标（startX、startY）和移动过程中的坐标（moveX、moveY），计算出滑动的距离和方向，从而决定是否进行页面内容的滑动操作。

二、代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <title>手机滑屏示例</title>
    <style>
        #container {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }

        .slide {
            width: 100vw;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="slide" style="background - color: red;"></div>
        <div class="slide" style="background - color: green; left: 100vw;"></div>
    </div>
    <script>
        const container = document.getElementById('container');
        let startX = 0;
        let startY = 0;
        let isMoving = false;

        container.addEventListener('touchstart', function (e) {
            const touch = e.touches[0];
            startX = touch.clientX;
            startY = touch.clientY;
            isMoving = true;
        });

        container.addEventListener('touchmove', function (e) {
            if (!isMoving) return;
            const touch = e.touches[0];
            const moveX = touch.clientX;
            const moveY = touch.clientY;
            const diffX = moveX - startX;
            const diffY = moveY - startY;
            // 判断是否为水平滑动（可根据需求调整阈值）
            if (Math.abs(diffX)>Math.abs(diffY)) {
                e.preventDefault();
                container.style.transform = `translateX(${diffX}px)`;
            }
        });

        container.addEventListener('touchend', function () {
            isMoving = false;
            const containerRect = container.getBoundingClientRect();
            if (containerRect.left < -50) {
                container.style.transform = `translateX(-100vw)`;
            } else {
                container.style.transform = `translateX(0)`;
            }
        });
    </script>
</body>

</html>

三、优势

用户体验友好
- 提供了一种直观的交互方式，类似于在手机操作系统或原生应用中的滑动操作，使用户能够轻松浏览内容。

节省资源
- 相比于页面刷新或重新加载来实现内容切换，滑屏效果可以在不重新请求大量数据的情况下展示新内容，提高性能。

四、应用场景

图片轮播
- 在移动端的图片展示中，可以通过左右滑屏来切换不同的图片。

页面导航
- 如移动端的网页导航菜单，可以通过上下滑屏来显示更多菜单选项或者切换不同的页面板块。
内容浏览
- 像新闻类应用中，通过滑屏来浏览不同的新闻文章页面。

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

有帮助

没帮助

相关·内容

【Appium】根据手机像素自动滑屏

swipe 360 1100 360 600 3000

7037 0

js如何判断手机横屏还是竖屏的方法

不废话，下面附上几种方法的代码：1.通过在html中分别引用横屏和竖屏的样式文件：Markup屏CSS }@media ( orientation: landscape ){ //横屏CSS }3.js判断是否为横屏竖屏:JavaScriptwindow.addEventListener...; } }, false);4..js判断是否为横屏竖屏JavaScriptfunction orient() { //alert('gete'); if (window.orientation...： 0 或180 竖屏Andriod：0 或180 横屏Andriod： 90 或 -90 竖屏转载于：https://www.jianshu.com/p/43b991eba5e55.当屏幕旋转的时候友情提示...center'; p.innerHTML = '为了您的良好体验'; p.appendChild(br); p.innerHTML += '请将手机

8903 0

手机侧滑导航栏

3.2K3 0

手机桌面锁屏时钟_手机锁屏时钟软件

桌面锁屏时钟是一款专门为用户提供手机便捷的学习生活音乐时钟管理的软件，用户可以在线设置非常简约的界面，自带了时间和日期，查看天气，温度和降噪音播放音乐的功能，利用经典的动态翻页，可以选择丰富的皮肤，让自己体验非常丰富的桌面锁屏...，提供了强大的工具箱，可以在线选择闹钟和计时器，辅助自己学习生活，在线能够播放舒适的音乐背景，支持用户在手机上面自己自由定义设置锁屏桌面，可以调节时钟和日期的样式。...桌面锁屏时钟的应用功能： 1、选择时钟，帮助用户使用手机软件，在锁屏的时候可以设置调整时钟。 2、日历天气，自动添加日历显示，在锁屏当中可以播放天气预报。...3、音乐添加，同时能够利用设置各种音乐播放，便于自己在线锁屏音乐。 4、海量背景，锁屏拥有非常丰富的背景选择，自己可以选择不同的样式切换。...桌面锁屏时钟的应用特色： 1、手机锁屏，专门针对手机丰富的锁屏功能，自己可以开启自动锁屏。 2、功能齐全，利用设置天气，温度和时钟，显示界面丰富多样。

1.7K3 0

Appium常用操作之「微信滑屏、触屏操作」

目录一、滑屏操作 1.访问之后，马上就滑屏可以吗？ 2.连续实现 2 次滑屏 3.代码二、模拟触屏 1.短按和点击的区别？ 2.用坐标还是元素？...# 重置与否 desired_caps["noReset"]=True 1.访问之后，马上就滑屏可以吗？不可以。先等待首页有个元素出现，再去滑屏。滑屏操作需要时间，模拟器或者真机执行操作更需要时间。...2.连续实现 2 次滑屏 #从右向左滑 driver.swipe(start_x,start_y,end_x,end_y,200) time.sleep(1) driver.swipe(start_x,...[图片来自网络] 滑屏也是触屏实现的。...滑屏操作是在屏幕上按住一个点，然后滑动到另外一个点，最后把它松掉。九宫格就是个典型的触屏应用。 [图片来自网络] 2.用坐标还是元素？元素方便简单，但是不是你想选就一定是哪一种。

1.6K2 0

Appium常用操作之「微信滑屏、触屏操作」

目录一、滑屏操作 1.访问之后，马上就滑屏可以吗？ 2.连续实现 2 次滑屏 3.代码二、模拟触屏 1.短按和点击的区别？ 2.用坐标还是元素？...# 重置与否 desired_caps["noReset"]=True 1.访问之后，马上就滑屏可以吗？不可以。先等待首页有个元素出现，再去滑屏。...2.连续实现 2 次滑屏 #从右向左滑 driver.swipe(start_x,start_y,end_x,end_y,200) time.sleep(1) driver.swipe(start_x,...图片来自网络滑屏也是触屏实现的。手指在屏幕上点点点，在 Appium 中提供了专门的TouchAction类来做这件事。 Press、longPress和release组合起来使用的。...swipe滑屏操作是没有元素的，针对的是整个屏幕。屏幕的话就只能通过坐标点。所以你看swipe的源码就可以看到。

2.1K2 0

js和css实现手机横竖屏预览思路整理

首先，实现手机页面在PC端预览，则先在网上找到一个手机的背景图片，算好大概内间距，用来放预览的页面，我这里是给手机预览页面的尺寸按iphone5的尺寸来的；一个手机页面在这里预览，要通过标签，左边选择不同的select选项，通过监听select选项的值，在js中动态改变iframe的src来实现；因为要实现横屏和竖屏的预览，切记，千万不能在点击横屏的时候，把竖屏的页面旋转90度，这样是没有效果的...，因为预览页面的本身还是竖屏的，只是页面跟着一起旋转了90度，要单独另外写一个横屏的box，宽度大于高度的，这样当预览页面识别到宽度大于高度，即按横屏的效果展示；我这里实现思路是把横屏的div默认display...:none;默认选择竖屏的时候，就直接把竖屏的box下的iframe的url和横屏模式下的iframe的url一起改变了，当选择横屏的时候，展示横屏的box，隐藏竖屏的box，但是事实是横屏的此时不会展示页面...横屏与竖屏通过定位放在同一个位置即可。

3.7K5 0

如何防止手机烧屏？

如何防止手机烧屏？随着智能手机的广泛普及，手机已经成为我们日常生活中不可或缺的一部分。然而，手机烧屏问题也逐渐成为用户们关注的焦点。那么，什么是手机烧屏？我们又该如何防止呢？...手机烧屏的原因手机烧屏，又称屏幕烧灼，主要发生在OLED屏幕上。由于OLED技术使得每个像素独立发光，长时间固定显示同一内容，会导致部分像素老化加速，从而形成烧屏现象。...二、如何防止手机烧屏了解了烧屏的原因，我们就可以有针对性地采取措施来预防烧屏。 ❶定期更换壁纸定期更换手机壁纸是预防烧屏的有效方法之一。...❻定期重启手机定期重启手机也有助于预防烧屏。重启手机可以清除屏幕上的缓存数据，减少静态图像的显示时间，从而降低烧屏的风险。 ️...总结️ 手机烧屏问题虽然普遍存在，但只要我们采取合理的预防措施，就可以有效降低烧屏的发生频率。

991 0

js截屏以及three.js场景截屏

来来来，说正事在手机端截屏完全不需要前端动什么脑子，但是在网页上截屏就很头疼了，我这里介绍两种情形，针对普遍和某一特殊功能需求 1、js截屏插件html2canvas.js 这个插件真的很好用，而且GitHub... js: html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild...(canvas) }); 2、js原生代码截屏如果你只是要截取canvas里面的内容，那就很简单了。...因为我是用在three.js这个3d项目的场景里面，所以没用过这个库的朋友可能没遇到过bug。那就是截屏出来的图片是空白的，场景scene后期渲染的比如灯光，加载的模型都没有截图截下来。...antialias: true, alpha: true, preserveDrawingBuffer :true }) 第二种方法就是在截图之前先渲染一下场景和相机，就不会实时刷新屏幕，导致我们截屏下来的是空白了

8.6K2 0

Appium常用操作之「元素定位、swipe 滑屏操作」

三、打开 app 并登录四、移动端特有的操作 1.swipe 滑屏操作 2.如果写一个操作，所有的手机都能适用，是不是应该考虑屏幕的尺寸呢？ 3.有没有什么办法可以获取整个设备的尺寸大小？...driver.find\_element\_by\_id('com.tfffc.cf:id/phone\_password\_login').click() 四、移动端特有的操作 1.swipe 滑屏操作...整屏滑动就是左滑右滑，上滑下滑。设置下滑动的百分比，如果滑动40%-50%，感觉根本滑动不过去。如果能够获取到整屏的大小，按百分比来滑动，滑动的距离在70%-90%，那肯定就能滑过去了。...根据每个手机的 x 轴和 y 轴，确定它的滑屏百分比，那随便什么样的手机都是可以滑屏的。所以在实现这个滑屏的时候，首先获取屏幕的size。 4.屏幕的 size 怎么获取呢？...**所有人的使用习惯：** 滑屏都是在正中间滑屏或者稍微偏下一点。从一个页面滑动到另外一个页面，y 轴没有变化。

2K8 1

Appium常用操作之「元素定位、swipe 滑屏操作」

三、打开 app 并登录四、移动端特有的操作 1.swipe 滑屏操作 2.如果写一个操作，所有的手机都能适用，是不是应该考虑屏幕的尺寸呢？ 3.有没有什么办法可以获取整个设备的尺寸大小？...输入密码') driver.find_element_by_id('com.tfffc.cf:id/phone_password_login').click() 四、移动端特有的操作 1.swipe 滑屏操作...整屏滑动就是左滑右滑，上滑下滑。设置下滑动的百分比，如果滑动40%-50%，感觉根本滑动不过去。如果能够获取到整屏的大小，按百分比来滑动，滑动的距离在70%-90%，那肯定就能滑过去了。...根据每个手机的 x 轴和 y 轴，确定它的滑屏百分比，那随便什么样的手机都是可以滑屏的。所以在实现这个滑屏的时候，首先获取屏幕的size。 4.屏幕的 size 怎么获取呢？...「所有人的使用习惯：」滑屏都是在正中间滑屏或者稍微偏下一点。从一个页面滑动到另外一个页面，y 轴没有变化。

3K1 0

折叠屏手机的相关知识

概述折叠手机是智能手机的一种造型，柔性AMOLED屏幕是折叠手机的突破关键。智能手机行业迎来“折叠屏时代”，各大手机厂商积极布局。...早在2018年10月底，国内柔性屏生产商柔宇科技就推出了全球首款折叠屏手机FlexPai(柔派)。...2019年2月份，三星和华为相继发布了旗下第一款折叠屏手机：GalaxyFold和MateX，并亮相世界移动通信大会(MWC)，揭开了“折叠屏手机时代”的帷幕。...另外，折叠屏智能手机在手机市场找到最适合自己的位置也需要一定的时间，而且就算找到自己的位置，折叠屏智能手机也会和普通智能手机长期共存，而这并不像很多人观点中那样必须要一种取代另一种的局面。...柔性AMOLED屏幕是折叠手机和穿戴手机的突破关键。但是，柔性折叠屏手机商用还不是太成熟。首先，柔性折叠屏手机太贵。柔宇科技最早发布的可折叠手机价格还不到万元，已被称为天价手机。

5922 0

AirServer无线投屏，手机屏幕投屏电脑神器

irServer是一款投屏神器，可以将手机设备，如iPhone、iPad、安卓上的屏幕投送到电脑屏幕上。特别我们日常开会要给客户演示手机上的操作时，投屏就显得非常专业。...当然，想要将日常手机上的视频画面投放到电脑上也是可以的。如何用AirServer进行手机投屏？...4、手机屏幕镜像，完成投屏二维码扫描连接成功后，点击iPhone的屏幕镜像即可连上电脑投屏成功。这样，整个投屏操作就完成了。滑动你的手机屏幕，就能看到电脑上同步操作了。...AirServer安装包下载地址： souurl.cn/iFhpdv AirServer激活码： 22SOYGT-FRDESW-DEFRGT-SLSiJUKI AirServer是一款非常实用的手机投屏软件...特别是对投屏质量要求高的，推荐使用AirServer，功能强大、技术成熟、投屏稳定、画质高清。

3K0 0

HTML自适应手机屏

在HTML里面 <head></head> 之间加入

2.6K8 0

Flutter 如何禁止手机横屏

问题引出群友发来问题： Flutter 怎么禁止横屏显示呀，网上说的几个方法都没有效群友遇到问题，就要群友去帮助，这样，这个群就有了存在的意义。...正文在一些特定的 App 里，我们不希望手机横屏的时候，App 发生旋转，在 main 函数里，像下面这样设定，就可以做到全局禁用横屏模式了。...Portrait 模式 DeviceOrientation.portraitDown, // DeviceOrientation.landscapeLeft, // 横屏 Landscape...，比如打开网页，也就是在WebView 的场景下，是可以横屏的，但是在其他界面下不可以横屏。...比如在我的代码里，我把 WebView 专门封装了一个页面，叫 WebPage，这样设定后，当用户进入网页的时候，可以横屏，但是退回后，就会强制恢复竖屏。

2.7K2 0

【干货】手机投屏到电脑

手机投屏到电脑操作方法 PC端使用快捷键WIN+I打开设置面板，点击系统，点击投影到此电脑移动端连接在WLAN中找到无线投屏并开启电脑弹出连接需要的PIN，在手机上输入即可完成连接遇到的问题

2091 0

HTML自适应手机屏

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-e...

5.8K2 0

手机滚动截屏软件推荐

读者提问：手机滚动截屏软件有推荐的吗？...阿常回答： 1、第三方软件：滚动截屏（iPhone） 2、iOS 13 自带的长截图功能（iPhone） 3、微信自带的图片合成功能（我 → 收藏 → 右上角+号，在笔记页面里可以导入多张截屏图片，再将这个笔记导出为图片就是一张长图了...4、大多数安卓手机自带的长截图功能（Android） 5、第三方软件：滚动截屏长截图（Android） 6、第三方软件：截图大师（Android）阿常碎碎念：阿常平时会使用方法 1 更多一些，大家可以根据自己所用机型来选取合适的截屏方法

1.9K2 0

HTML自适应手机屏

在HTML里面 <head></head> 之间加入 <meta http-equiv="Content-Type" content="text/ht...

2.8K5 0

滑屏 H5 开发实践九问 - 腾讯ISUX

滑屏的交互形式自从在 H5 中流行起来，便广泛应用在产品宣传、广告、招聘和活动运营等场景中，作为微信朋友圈广告惯用的形式，其影响力更是得到了强化与放大。如今滑屏H5可谓玲琅满目，数不尽数。...控制每一屏滑动如上 Gif 图所示，滑屏可以在 wrapper 上操作，也可以将每一屏作为独立的滑动元素。...不妨回看之前滑屏的最佳实现方式： ?...，而 iOS 和 Android 的大部分浏览器中，页面滚动时是会阻止页面重绘的（JS 的执行也无法立刻生效在页面中），所以Demo 里看到的效果就是回弹后才翻屏。...不一而足，无法穷举，滑屏只是一种形式，内容才是 H5 的精华所在，切勿舍本逐末。

3.8K8 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭