JavaScript触屏滑动API介绍

随着触屏手机、平板电脑的普及和占有更多用户和使用时间,触屏的触碰、滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

随着触屏手机、平板电脑的普及和占有更多用户和使用时间,触屏的触碰、滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为手指在屏幕上滑动处罚的事件,这里制作了一个简单的示例,可以通过这个示例认识touchmove事件。

效果展示 http://hovertree.com/texiao/mobile/12/

手机或者其他触屏设备扫描二维码体验效果:
JavaScript触屏滑动API介绍

本示例弹出的Touch事件请参考:http://hovertree.com/jsdoc/touch.htm

使用三个手指一起滑动的效果图如下:
JavaScript触屏滑动API介绍

代码如下:

<!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="https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/cf3a30e8-866b-4029-af4d-e4afcc5a8d19-1639930853771.jpg" 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>

 

转自:http://hovertree.com/h/bjaf/0k3j0n95.htm

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120278.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号