开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js触屏实现下滑图片

JavaScript 触屏实现下滑图片主要涉及到触摸事件（Touch Events）的处理。以下是关于这个问题的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案。

基础概念

触摸事件是Web开发中用于处理触摸屏设备（如智能手机和平板电脑）上的用户交互事件。主要的触摸事件包括：

touchstart：当手指触摸屏幕时触发。
touchmove：当手指在屏幕上滑动时连续触发。
touchend：当手指从屏幕上抬起时触发。

优势

用户体验：触屏操作更加直观和自然，适合移动设备。
响应速度：通过实时捕捉触摸动作，可以实现快速响应的用户界面。
交互丰富：支持多种手势操作，如滑动、缩放等。

类型

常见的触屏交互类型包括：

滑动切换：如图片轮播，通过左右滑动切换图片。
拖拽操作：允许用户在屏幕上拖动元素。
缩放功能：通过双指缩放来查看细节。

应用场景

移动应用：几乎所有现代移动应用都依赖触屏交互。
网页设计：特别是那些需要高度交互性的网站，如电商平台的商品展示页。
游戏开发：触屏操作为游戏提供了更直接的输入方式。

示例代码：实现下滑图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swipe Image</title>
<style>
  #imageContainer {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  #imageContainer img {
    width: 100%;
    display: block;
  }
</style>
</head>
<body>

<div id="imageContainer">
  <img id="swipeImage" src="image1.jpg" alt="Swipe Image">
</div>

<script>
  let startX, startY, image = document.getElementById('swipeImage');

  image.addEventListener('touchstart', function(event) {
    startX = event.touches[0].clientX;
    startY = event.touches[0].clientY;
  });

  image.addEventListener('touchmove', function(event) {
    event.preventDefault(); // 阻止默认滚动行为
    let currentX = event.touches[0].clientX;
    let currentY = event.touches[0].clientY;
    let diffX = startX - currentX;
    let diffY = startY - currentY;

    if (Math.abs(diffY) > Math.abs(diffX)) { // 判断是否为垂直滑动
      image.style.transform = `translateY(${diffY}px)`;
    }
  });

  image.addEventListener('touchend', function(event) {
    let endY = event.changedTouches[0].clientY;
    let finalDiffY = startY - endY;

    if (finalDiffY > 50) { // 向下滑动超过50px
      image.style.transform = 'translateY(-100%)'; // 滑动到下一张图片的位置
    } else if (finalDiffY < -50) { // 向上滑动超过50px
      image.style.transform = 'translateY(100%)'; // 滑动到上一张图片的位置
    } else {
      image.style.transform = 'translateY(0)'; // 回到原位
    }
  });
</script>

</body>
</html>

可能遇到的问题和解决方案

问题：滑动时页面发生滚动。原因：触摸事件默认会触发页面滚动。 解决方案：在touchmove事件中使用event.preventDefault()来阻止默认行为。

问题：滑动灵敏度不够或过于敏感。原因：滑动距离阈值设置不当。 解决方案：调整touchend事件中的滑动距离判断阈值（如上面的代码中的50px）。

通过以上方法，可以有效地实现触屏下滑图片的功能，并处理常见的交互问题。

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

有帮助

没帮助

相关·内容

在触屏设备上面利用html5裁剪图片

前言如今触屏设备越来越流行，并且大多数已经支持html5了。针对此。对触屏设备开发图片裁剪功能，让其能够直接处理图片。减轻服务端压力。技术点浏览器必须支持html5，包含fileReader。...思路利用filereader直接读取本地图片。然后赋予一个图片。该图片及裁剪框的位置计算跟pc端一样，可是触发的事件不一样，触屏版是依据触屏事件触发的。...执行结果这仅仅是一个demo，也是最初的雏形，当然不会太好看了，可是基本实现功能就可以。部分代码 <!...html5"); } js...document.getElementById("processBar");var processPoint=document.getElementById("processPoint");//--加入触屏事件

1.4K2 0

JS实现导航栏下滑悬浮透明置顶

如果想将导航栏下滑悬浮透明，请参照如下方式：给 header盒子(整个导航的盒子)添加 id="headerTop" 并添加以下css样式： #headerTop{ /*使导航栏固定在顶部*/...headerTop.sticky{ background-color: rgb(247, 247, 247, 0.9); border-bottom: 1px solid #e2e8f0; } 重要：添加JS...效果实现滑动检测： // 使顶部导航栏下滑显示，上滑透明 // 添加滚动事件 window.addEventListener('scroll', function...// 添加类 header.classList.toggle("sticky", window.scrollY > 0) }); 如果实现不了，请自行查找搜索哈

6.4K1 0

谷歌发布手势识别技术，有望实现隔空触屏【智能快讯】

通过色盲模拟器测试发现，除全色盲以外，Turbo 适用于 99.997% 的人群，同时适用于连续及非连续的图片处理。...来源：ai.googleblog.com 谷歌发布全新手感知技术有望为「隔空触屏」带来新突破谷歌推出全新的手势感知技术，通过机器学习，从单帧动作推断出手部 21 个 3D 关键点的动作，进而提供超高准确度的手部动作追踪和预测...目前手部感知技术主要依赖于对桌面环境强大的推理能力，该方法的提出有望实现手机上实时操作及多手追踪，为更广泛的研究和开发提供可能性，突破技术难点并提升用户体验。

7974 0

JS实现图片循环滚动

之前在前端的时候有遇到这样一个问题，实现 JS 图片的循环滚动，然后鼠标移入的时候停止滚动，鼠标移开继续滚动，这里无非就是设置了一个定时器，鼠标移上时清除定时器达到滚动停止的目的，鼠标移开时重设定时器，...DOCTYPE> JS实现图片循环滚动 #roll {

19.8K3 0

js实现图片预览翻页

原文地址可以直接复制粘贴打开，图片是在线的，原理简单好懂！效果源码 js"> <meta...= document.getElementById("pre"); var next = document.getElementById("next"); //要切换图片就是要修改...但是返回的是数组，所以你得操作的是数组中的对象 var img = document.getElementsByTagName("img")[0]; //创建一个数组用来保存图片的路径

4553 0

JS实现图片懒加载

懒加载的实现原理由于网页中占用资源较多的一般是图片，所以我们一般实施懒加载都是对图片资源而言的，所以这里的实现原理主要是针对图片。...大家都知道，一张图片就是一个标签，而图片的来源主要是src属性。浏览器是否发起亲求就是根据是否有src属性决定的。...实现步骤及Demo 1.先介绍几个和懒加载相关的API document.documentElement.clientHeight//获取屏幕可视区域的高度直观的图解： element.offsetTop...可能到这里还有一些人不知道怎么实现，我们还是用图来展示一下：看了这张图，我们就得出了一个判断公式：如果：offsetTop-scroolTop图片进入了可视区内，则被请求...2.代码实现下面的代码就是根据以上公式实现的： <!

11.4K2 0

JS实现关闭图片窗口

JS实现关闭图片窗口有趣的小案例池子： JS实现定时器 JS实现关闭图片窗口 JS实现输入检验获取焦点后隐藏提示内容的输入框 JS实现获取鼠标在画布中的位置聊天信息框显示消息...JS点击切换背景图自动切换背景的登录页面 JS制作跟随鼠标移动的图片 JS实现记住用户密码结果演示概述通过事件的绑定来实现，关闭网页中某个图片窗口的效果。...构建HTML框架图片 <img src="https://upload-bbs.mihoyo.com/upload...*/ width: 60px; height: 60px; /* 设置图片的上方外边距 */ margin-top..., sans-serif; /* 设置鼠标悬浮在上面的时候的样式 */ cursor: pointer; } JS

270 0

JS实现图片弹窗效果

中间磨磨唧唧从原生JS找到JS插件，浪费了不少精力和时间，但是也磕磕碰碰学到了些知识，建议读者：想学一下弹窗的JS实现代码的可以看看前两小节，只想实现效果的，直接复制源码就行！...一点击鼠标实现弹出/隐藏图片 ? 实现原理：一个div做容器，里面包含了二维码图片，把标题（鼠标点击的目标）做一个onclick监听，用div的display属性控制图片的显示和隐藏。...实现原理：当点击标题链接onclick监听或者刷新网页时候，获取隐藏的二维码图片对象并弹出，点击关闭或者二维码图片外的区域则隐藏二维码图片display = "none"。类似上面例子原理。..., 关闭弹窗，实现点击空白处关闭图片 modal.onclick = function () { modal.style.display = "none"; //...利用jquery.popup.js可以实现图中炫酷的动画效果, 支持animate.css。

23.8K3 0

js解决切换背景图片，发生闪屏问题

原因问题出现在本站首页，切换lol人物台词，会重新获取背景图片并切换。...而下一张图片加载完成之前，会将原背景色暴露出来，从而形成所谓的闪屏解决先创建一个Image实例，进行预加载，完成后再挂载到背景上 1 const img = new Image(); 2

5K2 0

原生js实现图片懒加载

目的：大量图片的网站，一次性加载所有图片会存在速度变慢，卡顿等问题。...我们可以使用图片懒加载技术，只加载视口内的图片，其余图片用默认小图片（由于所有图片都使用这一张小图片，只会发送一次请求，不会增加性能负担。）或者骨架屏代替。...等图片滚动到可视区后，再给图片url赋值。...如果 >=0 说明该元素在视口内，给元素的url赋值代码实现：图片地址" src="小图片地址"/> --> <img src="./images/1pxImg.png" data-url=".

6.5K2 0

原生js实现图片轮播效果

-- 图片部分,style部分设置便于js中改变偏移量，从而实现图片轮播--> 14 15...-- html body部分加载完成，最后调用js,进行操作；否则无法有效操作 --> 40 js"></script...{ 92 background-color: red; 93 } 94 .point span:active{ 95 background-color: gold; 96 } 1.js...// 鼠标离开container区域，自动播放 68 container.onmouseleave = function() { 69 autoPlay(); 70 } 71 72 // 实现点击相应的小按钮图片跳转到相应图片功能...index=i; 80 //无法点击point，使其变色 81 showPoint(); 82 } 83 )(i); 84 } 85 86 // 实现相应图片对应相应小按钮功能

17.1K6 0

JS 实现远程上传图片功能

场景：上传图片到远程服务器时,本地无法拿到服务器图片临时路径。上传文件到远程服务器 js.../jquery.1.9.1.js" type="text/javascript" charset="utf-8"> 图片的类型添加进去--> formData.append('type', 'up'); /** * 通过formData.set(key, val

7.9K2 0

原生JS实现图片爆炸特效

分享一个由原生JS实现的图片爆炸特效，效果如下：实现的代码如下：原生JS实现图片爆炸特效 var index = 0; var zIndex = 9999999; //本地图片路径...function show(x, y) { var R = x; var T = y; //爆炸前生成下一张图片...zIndex--; index++; //如果三张不同的图片切换完，切换到第一张 if (imgIndex

18.5K2 0

原生JS实现图片懒加载

通过原生JS实现懒加载 <!

5.3K1 0

JS 实现网页截屏五种方法

https://segmentfault.com/a/1190000037673677 最近研究了下如何利用JavaScript实现网页截屏，包括在浏览器运行的JS，以及在后台运行的nodeJs的方法...实现截屏的代码，假设文件名为github.js： // 创建一个网页实例 var page = require('webpage').create(); // 加载页面 page.open('http:...实现截屏的代码example.js： const puppeteer = require('puppeteer'); (async () => { const browser = await...把它插入到foreignObject里面，然后组成一个svg，然后生成一个data URL；如果想得到PNG内容或原始像素值，可以先使用data URL创建一个图片，使用一个离屏canvas渲染这张图片...网上查了下感觉有一篇文章写的挺好的：浅析 js 实现网页截图的两种方式。感兴趣的可以看下。未验证的猜想虽然后面这两种是前端的实现方式，但是结合前面讲的headless库，也是可以实现后端截屏的。

7.7K3 0

在线图片压缩,JS实现图片压缩功能

选择一张图片 const img_original = document.getElementById('img_original'); const img_output = document.getElementById...img_original.src = this.result; img_original.onload = () => { console.log('图片原始宽高...:', img_original.naturalWidth, img_original.naturalHeight); console.log('图片原始大小:', file.size...使用Canvas压缩 function compress() { // 压缩到图片原始宽高的一半 let w = img_original.naturalWidth...', blob.size); // 预览压缩后的图片 img_output.src = base64 } 3.

10.6K1 0

js实现本地上传图片预览

在做网站系统时经常会用到图片上传功能，用户往往希望能看到自己上传的图片的样子，有的人是采用将图片上传到服务器之后再回显到页面，这种方式在无形之中增加了服务器的运行压力，因为如果用户感觉不满意还会再次上传图片...为了减轻服务器压力，我们通过js来实现本地图片上传预览功能，不经过服务器就实现预览效果。...name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"> 上面这部分代码是页面上传按钮和显示图片的区域...接下来请看js控制代码 function setImagePreview(avalue) { var docObj=document.getElementById("doc"); var imgObjPreview...; } imgObjPreview.style.display = 'none'; document.selection.empty(); } return true; } 这样我们就实现了本地图片上传预览功能

8.1K4 0

开奔驰车只需用大脑，触屏语音全省掉！“意念控车”真的实现了

---- 新智元报道来源：网络编辑：David 【新智元导读】开车时还在用语音控制和触摸屏上点来点去？奔驰表示，未来可能不需要了！开车时想导航，想切歌，你只要想想就行，剩下的交给车。...你是否因不断浏览汽车触摸屏上的菜单而烦恼？想想看，用屏幕上的全键盘输入导航目的地，或者通过滚轮按钮手动跳过车内播放的当前曲目，开车时做这些，是不是有点烦？...未来，可能不需要将电极连接到后脑勺就能实现“意念控制”。...用户的注意力越集中，神经元活动程度越高，进而触发车辆实现目标功能。”...脑机接口技术完全独立于语音和触控，为用户与车辆的直观交互开辟了革命性的可能。虽然这款车仍属于概念车，“用意念控制车”距离大规模进入消费市场可能还要相当长的时间。

3552 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

Html图片懒加载动画,js实现图片懒加载效果

本文实例为大家分享了js图片懒加载的具体代码，供大家参考，具体内容如下图片懒加载，思路:当鼠标滑动到对应图片的高度时，进行图片的加载； #div{ width: 575px; height: auto...aImgTop = getPos(aImg[i]).top; // 当滚动的时候进行判断,看他的滚动的高度加上它的clientHeight 是否比它的 top 值大 // 如果大或等于说明滚动到当前位置可以加载图片...if (oScrollTop + clientH >= aImgTop) { // 进行图片的加载 aImg[i].src = aImg[i].getAttribute(“_src”); } }

9.4K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭