Web前端学习JS篇之“移动端”

最新推荐文章于 2022-11-11 20:47:22 发布
最新推荐文章于 2022-11-11 20:47:22 发布
阅读量225 收藏
点赞数
文章标签： web js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38159245/article/details/100921684
版权

触摸事件：

touchstart:触摸到一个DOM时触发

touchmove:手指在DOM上滑动时触发

touchend:手指在DOM上移开时触发

触摸事件对象TouchEvent：

touches:可以检测到屏幕上有几个手指触摸

targetTouches:可以检测到DOM上有几个手指触摸

changedTouches:检测手指是否触摸或离开

拖动事件：

使用上述三个属性检测移动距离就可以实现

移动端的点击事件会产生300毫秒延时问题

有三种解决方案，最快的方法是f引入astclick.js

强大的触摸滑动插件Swiper，superSlide，touchSlide，zy.media.js

静驭沧海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习笔记之移动端 3.23
qq_36450483的博客
03-24 440
前端学习笔记之移动端
03web前端进阶教程-移动端
最新发布
07-04
"03web前端进阶教程-移动端"是一个专门针对移动设备优化的前端学习资源，旨在帮助开发者掌握移动端的前端开发技能。 【移动端前端开发的重要性】 移动设备的普及使得移动端前端开发成为不可或缺的技能。移动设备的...
移动前端开发和 Web 前端开发的区别
揽星逐月酒微醺的博客
11-17 3850
链接：https://www.zhihu.com/question/20269059/answer/60767669 1，普通pc端开发与移动端开发区别。 先说背景，我大言不惭的说一下，我pc端的前端开发干了有快4年多，不算大牛，也算一个标准的前端开发工程师吧，可怜的是我2015年之前做过的移动端项目不超过1个。。所以几乎经验为零。我对这个神秘又被炒的火热的名字迷惑了很久，移动前端开发工程
前端学习之移动端
weixin_53105591的博客
07-22 584
前端学习之移动端
移动端——JS学习
m0_56783154的博客
03-10 142
移动端——JS学习 1. 触摸事件 1.1 touch触摸事件 1.2 touch触摸事件对象
(:◎)≡前端学习之移动端篇
Zhang_Yu_794的博客
10-13 233
前端学习之移动端篇1.移动端基础2.视口3.二倍图4.移动端开发选择5.移动端技术解决方案6.移动端常见布局 1.移动端基础 （谷歌F12有手机调试） 2.视口 （乔布斯发明的????） 3.二倍图 4.移动端开发选择 5.移动端技术解决方案 6.移动端常见布局 ...
thebootstrapthemes-portfolio_前端开发_移动端web_移动Web_
09-30
本篇文章将以"thebootstrapthemes-portfolio"为主题，探讨移动端Web前端开发中的关键技术和实践。 "thebootstrapthemes-portfolio"是一个专为移动端设计的前端项目，其核心亮点在于利用了流行的Bootstrap框架，以...
HTML5与移动端web学习笔记
02-26
这部分跟web前端开发差别不大，使用的技术都是html+css+js。区别为手机浏览器是webkit的天下，pc端是IE的天下。App前端开发。使用的技术也是html+css+js，但它需要基于PhoneGap，ReactNative等开发平台调用手机核心...
web端，及移动端H5前端人脸识别所必须的tracking-min.js与face-min.js文件
09-27
web端，及移动端H5前端人脸识别所必须的tracking-min.js与face-min.js文件，在vue项目中新建assets文件夹，tracking-min.js与face-min.js文件解压到新建文件内，最后再.vue文件中引用。
前端之移动web开发学习
fujiaxu666的博客
10-10 320
移动端浏览器的现状 移动端的浏览器基本上是由webkit发展而来的，所以只需要采用处理webkit浏览器的方法即可，也就是说移动端的没有pc那么多的兼容性问题。 手机屏幕现状 做为开发人员来说，对于分辨率不予要太多的关注，因为我们常用的单位是px 物理像素比 参考博客 移动端的调试方法 视口 视口(viewport)就是浏览器显示内容的屏幕区域。分为：布局视口、视觉视口和理想视口。 布局视口（layout viewport） 视觉视口（visual viewport） 理想视口（ideal v
前端学习（285）：移动端简单知识
歌谣的博客
01-01 124
前端移动端基础
weixin_45798469的博客
10-24 200
目录1 移动端基础1.1 meta视口标签1.2 背景缩放1.3 特殊样式 1 移动端基础 1.1 meta视口标签 <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0 minimum-scale=1.0"> 属性 解释说明 width 宽度设置的是viewport宽度，可以设置device-width特殊值 i
前端学习(二十五）移动端（笔记）
weixin_30600197的博客
09-03 96
移动端 手机、pad、watch、电视 ------------------------------------------------- 移动端和pc端的写法一样。只不过更加注意尺寸。 移动端测试 1.浏览器模拟手机 仅供参考 2.真机测试 写移动端必须加viewport ...
Web前端与移动开发学习路线图
qq_35952082的博客
03-04 3214
Web前端与移动开发学习路线图。
web前端与移动端区别
weixin_45629623的博客
06-30 556
持续更新~ 获取鼠标位置到标签边距离 pc端：event.clientX 移动端：event.changedTouches[0].clientX 鼠标/触摸交互 pc端:mousemove，这是鼠标事件 移动端：touchmove，这是触摸事件 浏览器的滚动条到顶部距离 pc端:document.documentElement.scrollTop 移动端:document.body.scrollTop pc端:可以用两种模式 移动端:不支持history模式，否则路由跳转会有问题 vue
前端与移动开发学习之路（一）
simon_dg的博客
08-27 2837
作为大四女汉子，在学校专修软件工程。因为之前根本不知道专业方向，所以在学习道路上吃了很多苦。如果你学习的是相关专业，或者是对前端与移动开发感兴趣的小白。可以继续关注我的文章。前端开发必备工具——sublime 因为我常用sublime，所以在这里介绍sublime的配置。除了sublime这一开发神器外，还有webstorm、atom。读者可自行了解。1、 安装包下载 官网地址：ht
javascript学习-移动端事件
qq_43368682的博客
07-29 117
触摸事件touch 屏幕触摸事件，PC端鼠标的移动时点击是无效的。但是在模拟器当中，鼠标的点击就会变为触摸事件。允许多点触控，事件触发的位置信息包含在touches属性里。 常规触摸事件: var body=document.querySelector("body"); body.ontouchstart=function(event){ console.log(event); console.log("触摸开始事件") } body.ontouchmove=fu
zepoto.js的使用
JackieDYH的博客
04-26 863
简介：Zepto是移动端开发框架,是jQuery的轻量级代替品；API（application programming interface 其实就是类库或框架中的方法）及 语句同jQuery相似，但文件更小(可压缩至8KB)。是目前功能完备的库中最小的一个。 由于zepto中将兼容ie的代码彻底删除，因此zepto更轻量级 Zepto也是用$作为核心函数来使用 和jQuery一样 ...
Web前端开发 移动端开发（快速入门）
weixin_46127956的博客
11-11 3631
移动端开发快速入门
H5 CSS笔记 (2).docx
11-26
"这篇文档是关于H5 CSS学习的笔记，涵盖了从基础到高级的Web前端开发知识，包括HTML5、CSS3、JavaScript、jQuery、Bootstrap、AngularJS以及微信开发等，同时也简单介绍了Internet和Web的基本概念及工作原理。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值