JavaScript触屏滑动API介绍
随着触屏手机、平板电脑的普及和占有更多用户和使用时间,触屏的触碰、滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为手指在屏幕上滑动处罚的事件,这里制作了一个简单的示例,可以通过这个示例认识touchmove事件。
效果展示 http://hovertree.com/texiao/mobile/12/
手机或者其他触屏设备扫描二维码体验效果:
本示例弹出的Touch事件请参考:http://hovertree.com/jsdoc/touch.htm
代码如下:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>js触屏touchmove手势事件_何问起</title><base target="_blank" /> <meta charset="utf-8"> <style>#hovertreechuping{min-width:300px;min-height:300px;background-color:darkgreen;color:white;text-align:center;line-height:50px;} .hovertreeinfo {text-align:center; }.hovertreeinfo a{color:blue;} </style> </head> <body> <div id="hovertreechuping">何问起提示:请在本区域内触摸滑动手指。请使用手机等触屏设备。可以使用一个手指滑动,也可以使用多跟手指滑动。</div> <div class="hovertreeinfo"><a href="http://hovertree.com/">何问起</a> <a href="http://hovertree.com/menu/texiao/">网页特效</a> <a href="http://hovertree.com/h/bjaf/0k3j0n95.htm">代码说明</a> <br />手机扫描二维码体验效果:<br /> <img src="http://hovertree.com/hvtimg/bjafjg/2got11dw.png" alt="二维码" /> </div> <script type="text/javascript"> function hovertreeMove(event) { alert("何问起提示:在元素区内触发了滑动事件。包含" + event.touches.length + "个" + event.touches[0]); } document.getElementById("hovertreechuping").addEventListener("touchmove", hovertreeMove); </script> </body> </html>
分类:
javascript
, 网页特效
标签:
Javascript
, js
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架