移动端 H5 横屏后滑动事件横向变成纵向纵向变成横向

2024-08-24

关于H5从PC端切换到移动端，屏幕显示内容由横向转为竖向的研究！

1.前言: 在项目中,我们常会遇见在手机端需要横屏观看的效果,而在pc端则默认切换到竖屏的样式. 或者是,UI提供的图是一个长图,但是在移动端我们需要让这个图在手机横屏时显示. 以上两个都需要我们实行一个框的自行切换方向,这个该如何实现呢? 2.解决方案我们把所有需要切换方向的内容,都放在一个盒子里面,让这个最外面的盒子实现自动切换方向,里面的内容即可自动实现切换方向! <!DOCTYPE html> <html lang="en"> <head

移动端H5页面惯性滑动监听

移动端H5页面惯性滑动监听在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑动整个过程.在网上并没有找到相应的监听事件,于是就自己写了一个监听方法. 惯性滚动开始时调用的方法是listenSlidingA,结束时调用的方法是listenSlidingEndA. <!DOCTYPE html> <html> <head> <title>滚

移动端h5模拟长按事件

为啥写这篇文章最近接了个需求,要求长按某个标签显示删除一个悬浮的删除按钮.这个需求其实在app上很常见,但是在移动端h5中,我们没有长按的事件,所以就需要自己模拟这个事件了. 大概效果如下: ps: 为了做个gif还下了app,还得通过邮件发到电脑上,脑瓜疼.. 思路放弃click事件,通过判断按的时长来决定是单击还是长按使用touchstart和touchend事件在touchstart中开启一个定时器,比如在700ms后显示一个长按菜单在touchend中清除这个定时器,这样如果按

移动端touch触屏滑动事件、滑动触屏事件监听！

一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距.最近一个W3C工作组正合力制定这一触摸事件规

完美解决移动端H5页面的滑动穿透问题

同事的分享,记录下来. 代码如下: css: body.modal-open { position: fixed; width: 100%; } js: // 兼容低版本 document.scrollingElement写法 (function () { if (document.scrollingElement) { return; } var element = null; function scrollingElement () { if (element) { return eleme

移动端h5摇一摇事件

// 摇一摇动作 //获取加速度信息 //通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,进行设备是否有进行晃动的判断. //而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值. var SHAKE_THRESHOLD = 4000; var last_update = 0; var x, y, z, last_x = 0, last_y = 0, last_z = 0; function deviceMotionHandler(eventData) { var ac

李氏滑动事件冲突解决方案之处理子ViewGroup的超棒方案

父ViewGroup(CurView) 和子 ViewGroup(ParentView) 滑动事件冲突解决方案之处理子ViewGroup的超棒方案: 子ViewGroup 以 SlipRelativeLayout 为例子: 当 mEnableX=true, mEnableY=false 时, SlipRelativeLayout 中所有的横向滑动事件都交给自己处理,横向滑动事件都交给 ParentView 处理: 当 mEnableX=false, mEnableY=true 时, Sl

移动端H5开发 (滑动事件)

最近一直在做手机App H5的开发,在开发过程中,经常会遇到很多滑动事件,写个demo,分享自己的一些写法.(如写的不好,轻喷!) 直接贴代码 html css代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>touch demo</title> <style type="text/css"> #demo{

移动端上下滑动事件之--坑爹的touch.js

下面的方法,不知道是操作方法不对还是啥. 在 zepto.js 里面加那一段代码不起作用百度的 touch.js 是可以用的,但是使用方式和 zepto有点不一样. 解决方案:参照这个链接地址 http://www.cnblogs.com/zhongxia/p/5410478.html ========================================================== 转:http://blog.csdn.net/minidrupal/article/de

移动端上下滑动事件之--坑爹的touch.js

原文 http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩. 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画. 接下来就说说自己在搞这些页面里面碰到的一个小问题-------zepto.js里面,坑爹的touch.js的上下滑动( swipe )事件失效. 在举例之前,先科普一下如何在pc端,查看h

解决移动端页面滚动后不触发touchend事件

解决移动端页面滚动后不触发touchend事件问题在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. 可是,touchend事件在页面滚动时有个问题.在滚动完毕后,假设当前触点的位置所指的元素绑定了touchend事件,这时便会触发该元素的touchend事件,造成误操作. 解决方法解决方法非常easy.就是在页面滚动时停止touchend事件冒泡.这样就能够防止触发touchend事件. 用法

移动端H5混合开发设置复盘与总结

此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了,用户可以通过手机端嵌入的h5网页进行场布设置,原来只能在pc端浏览器,还得带上个笔记本电脑很是不方便,这个功能很好的解决了目前设置不顺畅的问题.上线后得到大家的认可,提升了业务效率,这一个多月的辛苦开发还是值得的,接下来是对自己这一段时间开发过程的一个总结. 整体开发基于H5+Css3+Jquery

JS移动客户端--触屏滑动事件 banner图效果

JS移动客户端--触屏滑动事件移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取

移动端触摸（touch）事件

移动端时代已经到来,作为前端开发的我们没有理由也不应该坐井观天,而是勇敢地跳出心里的那口井,去拥抱蔚蓝的天空.该来的总会来,我们要做的就是接受未知的挑战.正如你所看到的,这是一篇关于移动端触摸事件的文章,也就是我们平时在手机中用得最多的动作:touch.现在让我们开始 touch touch touch 吧! Touch 事件首先 touch 包含三类事件,它们分别是:touchstart.touchmove.touchend .望文生义这种本能相信你应该会有,但在这里我还是有必需对这三个词进

手摸手，带你实现移动端H5瀑布流布局

移动端瀑布流布局是一种比较流行的网页布局方式,视觉上来看就是一种像瀑布一样垂直落下的排版.每张图片并不是显示的正正方方的,而是有的长有的短,呈现出一种不规则的形状.但是它们的宽度通常都是相同的因为移动端瀑布流布局主要为竖向瀑布流,因此本文所探讨的是竖向瀑布流特点竖向瀑布流布局主要有下面几种特点: 一般出现在移动端 H5 页面底部主要以图片或视频为主降低页面复杂度,节省空间,可以容纳更多内容不规则展示,不会那么枯燥,用户体验好难以或者说不能滚动到页面最底部不同于传统的分页,瀑布流因

webview滑动事件与内部html左右滑动事件冲突问题的解决办法

最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现,本来是为了增强用户体验,在页面加载的时候可以显示一个转动的图标,但是到了最后,这个功能反而成了影响用户体验的鸡肋, 因为页面中有很多图片, 每次页面显示出来后,图片还没加载完毕,所以加载图标一直在那里转动,影响了用户浏览页面,最后将此功能删除了). 以上基本具备了混合app的雏形,可以拿出来忽悠一

一个H5的3D滑动组件实现(兼容2D模式)

起由原始需求来源于一个项目的某个功能,要求实现3D图片轮播效果,而已有的组件大多是普通的2D图片轮播,于是重新造了一个轮子,实现了一个既支持2D,又支持3D的滑动.轮播组件. 实现思路刚一开始肯定是无法直接实现3D滑动组件的,所以将功能拆分,如下步骤实现一个双向循环链表,作为底层Item的数据结构基于链表,实现一个无限循环的2D滑动组件基于2D滑动组件做3D变化得到3D组件兼容性检查以及功能封装,简化使用,确保稳定双向循环链表的模拟以前看到的轮播组件大多是用数组来作为底层数据结构

移动端H5制作安卓和IOS的坑持续更新...

移动端H5制作安卓和IOS的坑持续更新... 前言:最近参加公司的H5页面创意竞赛,又遇到不少页面在不同系统上的坑.踩坑之余,觉得很多之前遇到的知识点都忘了,索性开一篇博文,把这些坑都统一归纳起来,持续收集更新,于己利人,抛砖引玉. 1. ios系统手机无法自动播放BGM 这个是苹果系统限制,默认不允许自动播放音频,往往需要点一下触发play()事件才能播放. 那么我们在页面onload后触发播放事件: document.getElementById('music').play(); 到这里一

移动端 H5 页面注意事项

1. 单个页面内容不能过多设计常用尺寸:750 x 1334 / 640 x 1134,包含了手机顶部信号栏的高度. 移动端H5活动页面常常需要能够分享到各种社交App中,常用的有微信.QQ 等. 使用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不止有顶部导航,底部也有操作栏(safari浏览器也一样),这些都会占用设计稿显示区域,因此在设计环节就需要考虑内容的多少,页面底部要预留一定的空白,这样在微信或qq中才不会被遮住. 如下图(QQ内置浏览器):

移动端H5多平台分享实践--摘抄

作者:大漠日期:2018-01-20 点击:628 mobile 编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货. 点击链接查看最新前端内容,或到各大应用市场搜索「掘金」下载APP,技术干货尽在掌握中. 圣诞节和元旦团队策划了两个活动,都涉及到了在多个平台下的分享,如何按照产品要求实现多平台下一致的分享效果,包括分享文案的动态生成,在没有Native的帮助下是比较困难的.我们研究了很多分享方案,得到了一套较为完整的

multipages-generator今日发布?！妈妈再也不用担心移动端h5网站搭建了！

本文适合的读者?‍?‍?‍? 现在在手淘,京东,今日头条,美柚等过亿用户的手机app中的,都常见h5网页,他们有更新快,灵活,便于分享和传播的特性.这里有他们中的几个h5的例子:(手淘,美柚).这些app中都嵌者数以百计,千计的h5网页.背后他们开发这些h5的框架是怎么样的呢? 或许你也想开发一些h5,或者简单的react,vue应用,做些广告,做些互动和营销,发布到微信朋友圈传播,那如何快速的搭建和发布这些h5呢? 或许你是前端工作不久的初学者,搭建这样的多页h5网站,怎么样的架构才是正确的打

移动端 H5 横屏后 滑动事件横向变成纵向 纵向变成横向

热门专题

移动端 H5 横屏后滑动事件横向变成纵向纵向变成横向