移动端——滑屏原理分析

滑屏原理分析

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,user-scalable=no" /><style>html{height: 100%;}body{margin: 0;height: 100%;position: relative;overflow: hidden;}#wrap{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}#scroll{position: absolute;top: 0;left: 0;width: 100%;}</style><script>window.onload=function(){var wrap=document.querySelector('#wrap');var scroll=document.querySelector('#scroll');var startPoint=0;//用于储存手指按下的坐标var startElement=0;//用于储存手指按下时元素距离定位父级的距离wrap.addEventListener('touchstart',function(e){var touch = e.changedTouches[0];startPoint = touch.pageY; //记录手指按下时手指在页面的位置startElementTop = scroll.offsetTop;//当前元素距离包裹层的TOP值});wrap.addEventListener('touchmove',function(e){var touch = e.changedTouches[0];var nowPoint = touch.pageY;//记录移动后手指的在页面中的位置var distance = nowPoint-startPoint;//记录move的移动距离scroll.style.top=startElementTop+distance+'px';//滚动层当前的top值=手指按下时的TOP值+手指的移动距离});}</script></head><body><div id="wrap"><!-- 包裹层 --><div id="scroll"><!-- 滚动区域 -->滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br>滑屏原理分析<br></div></div></body>
</html>

移动端——滑屏原理分析相关推荐

H5案例分享：移动端滑屏 touch事件
移动端滑屏 touch事件移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...
移动端事件（二）—— 移动端滑屏切换的幻灯片
经过昨天对移动端基础的了解,今天就来用原生JS实现一下我们的幻灯片. 因为是用原生实现,所以本文篇幅较长,各位看官只需理解思路即可,代码部分可以粗略看看. 毕竟我们有better-scroll这样封装 ...
原理剖析-Netty之服务端启动工作原理分析(上)
一.大致介绍 1.Netty这个词,对于熟悉并发的童鞋一点都不陌生,它是一个异步事件驱动型的网络通信框架: 2.使用Netty不需要我们关注过多NIO的API操作,简简单单的使用即可,非常方便,开发门 ...
h5滚动时侧滑出现_H5案例分享：移动端滑屏 touch事件
touchstart: //触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发. touchmove: //在屏幕上滑动时连续的触发.在这个事件发生期间,调用preventDefault()可阻止 ...
极域电子教室学生端全屏广播分析及破解的编程实现
前期准备虚拟机:VMWare 14 Pro 操作系统:(均为64位) ①Windows XP SP2系统用于运行学生端以及进行分析 ②Windows 7家庭普通版用于运行教师端 ③Windows ...
Android 7.0 分屏原理分析
在以往的Android系统上,所有Activity都是全屏的,如果不设置透明效果,一次只能看到一个Activity界面. 但是从Android N(7.0)版本开始,系统支持了多窗口功能.在有了多窗口 ...
javascript 手机手势动作touch触屏原理分析
转载链接:http://www.lvtao.net/web/220.html $(function(){ document.getElementById("moveId").add ...
javascript移动端滑屏事件
来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...
手机 html5 hammer drag widget,Hammer.js+轮播原理实现简洁的滑屏功能
最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...

移动端——滑屏原理分析

滑屏原理分析

移动端——滑屏原理分析相关推荐

最新文章

热门文章