移动端touch事件实现页面弹动--小插件

动手之前的打盹

说实话真的是好久没有更新博客了，最近一直赶项目，身心疲惫；最关键的是晚上还要回去上一波王者，实在是忙啊！
这周下来，清闲了些许，或许是因为要到国庆的缘故吧，大家都显得无精打采。俗话说的好: ”身在曹营，心在汉!“。早早的就去为祖国庆生去了，哈哈。
是时候表演真正的技术了，那么先来一杯coffee，就是那种像屎尿混合在一起的颜色的饮料；要问什么味道，哈哈，一周没洗的脚被一双一年没洗的袜子包着，捂在密不透风的旅游鞋里，散发出来的汗液的味道。

小页面的搭建

搭建一个网页，注：改页面是移动端页面，请在浏览器调成移动端状态测试
将body设置为overflow:hidden，很奇怪吧，不是overflow:scroll 吗？对，不是，我们是要通过touch事件来模拟滑动，然后控制translate，来使页面弹动
body里面的内容要比body高，这样在滑动整个页面的时候就会出现滑倒顶部或底部继续滑动，页面会弹回底部或顶部，即bounce页面效果，有点像App
最后的最后，记得要在浏览器上调成移动端模式测试奥，touch事件只支持移动端

<!DOCTYPE html>
<html style="height: 100%">
<head><meta charset="UTF-8"><meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /><title>还有谁</title></head>
<body style="height: 100%; overflow: hidden;"><div id="main" style="height: 813px; width: 100%;background-color: #c1c1c1;"></div>
</body><script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</html>

正所谓青铜的操作，王者的思想，是时候拿一波五杀了，哈哈哈，还有谁

关键还是js，是吧，贝斯，架子鼓弄得再好，没鸟用，什么有用，主唱啊，哈哈哈
大家好，我是人见人爱，欢迎车震们来解说这一期的代码
话不多说，先上代码；上图不上码，菊花万人捅

var  startX,//触摸时的坐标startY,x, //滑动的距离y,aboveY=0; var dom = document.getElementById('main');
var html_h = $("html").height();
var dom_h = $("#main").height();
//touchStart事件
dom.addEventListener('touchstart',function(e){e.preventDefault();var touch=e.touches[0];startY = touch.pageY;
},false);
//touchmove事件
dom.addEventListener('touchmove',function(e){e.preventDefault();        var  touch = e.touches[0];               y = touch.pageY - startY;// console.log(endY);         $('#main').css("transform","translate(0px,"+(aboveY+y)+"px) translateZ(0px)");$('#main').css("transition-timing-function","cubic-bezier(0.1, 0.57, 0.1, 1)");$('#main').css("transition-duration","0ms");},false);//touchend事件dom.addEventListener('touchend',function(e){e.preventDefault();var arr = $("#main").css("transform").split(',');aboveY = parseInt(arr[5].substr(0,arr[5].length-1));if(arr[5].substr(0,arr[5].length-1)>0){$('#main').css("transform", "translate(0px, 0px) translateZ(0px)");$('#main').css("transition-timing-function","cubic-bezier(0.1, 0.57, 0.1, 1)");$('#main').css("transition-duration","600ms");aboveY = 0;} else if((html_h-dom_h)>aboveY) {$('#main').css("transform", "translate(0px, "+(html_h-dom_h)+"px) translateZ(0px)");$('#main').css("transition-timing-function","cubic-bezier(0.1, 0.57, 0.1, 1)");$('#main').css("transition-duration","600ms");aboveY = (html_h-dom_h);}
},false);

那么接下来，我为大家简单的介绍一下代码的作用
touch事件不用多逼逼，大家都懂，那么他是如何模拟滑动的呢？，没错就是 transform:translate(0px, 888px) 这个css3属性，明白了吧，通过改变这个属性，从而改变了html模块的位置
那么大家又想问了，这个 transition-timing-function 是干嘛用的，说白了就是个运动曲线，赛贝尔曲线，哎，懂了吧，就是规定你这个html模块如何运动的
时间呢？得有吧， transition-duration 这不就来了吗？哈哈，简单吧，都是css3，社会我三哥，人丑话不多

强行插波广告，哈哈，又到了大家最喜欢的广告环节

下面这段代码就是监听touch事件结束后页面上被滚动模块的位置，若是在顶部或底部，便将他们来个运动，就是回到顶部或底部，这样一来，我们将页面来出去的超过窗口的部位就又弹回来了，有运动时间，还有运动曲线，不用想了，就想美女的身材一样，好看
aboveY是干什么的，是记录上一次页面滚动的位置，便于下一次继续从上一次的位置开始滚动
其他的部分，我想大家仔细看看，应该就明白了，正所谓，看直播上王者，我相信，你们可以的，你看，你看，看不懂，就盯着它看，代码害羞了，你就看懂了

if(arr[5].substr(0,arr[5].length-1)>0){$('#main').css("transform", "translate(0px, 0px) translateZ(0px)");$('#main').css("transition-timing-function","cubic-bezier(0.1, 0.57, 0.1, 1)");$('#main').css("transition-duration","600ms");aboveY = 0;} else if((html_h-dom_h)>aboveY) {$('#main').css("transform", "translate(0px, "+(html_h-dom_h)+"px) translateZ(0px)");$('#main').css("transition-timing-function","cubic-bezier(0.1, 0.57, 0.1, 1)");$('#main').css("transition-duration","600ms");aboveY = (html_h-dom_h);}

最后的最后的最后，使劲上下拉动页面，那个灰色的模块就会出现弹动效果了（bounce页面效果），记得要在浏览器的移动端奥

转载于:https://www.cnblogs.com/scale/p/7611537.html

移动端touch事件实现页面弹动--小插件相关推荐

搞定移动端一(移动端 touch 事件，TouchEvent 对象)
移动端事件 1.目标掌握移动端 touch 事件使用掌握 touch 事件和 mouse 事件的区别掌握 touchEvent 实现移动端幻灯片 2.移动端touch事件 touchstart ...
demo h5 touch 移动_H5案例分享：移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向方法一当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
移动端touch事件 touchstart、touchmove、touchend
移动端touch事件 touchstart.touchmove.touchend touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发.touchmove事件:当手指 ...
appcan slider轮播图和页面弹动冲突解决
在安卓下,用第三轮播图,卡成球一样.经常有问题,但IOS下很正常,官方自带的slider不加页面弹动很OK.但不可能app中不用弹动吧. 修改方法: 在DIV中直接加滑动禁止弹动代码如下 <di ...
移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
移动端 touch事件过渡事件动画事件
移动端首先要书写meta标签 <meta type="viewport" content="width=device-width,user-scalable=no, ...
click和touchmove vue_移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
移动端touch事件的处理
首先简单介绍一下iOS上的浏览器(这里主要指Safari)所支持的多触式事件模型,然后将触控(Touch)这种简单的动作升级为手势(Gestrue),最后将javascript + html + ...
原生js实现移动端touch事件，解决穿透问题
四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取 ...

移动端touch事件实现页面弹动--小插件

动手之前的打盹

小页面的搭建

正所谓青铜的操作，王者的思想，是时候拿一波五杀了，哈哈哈，还有谁

强行插波广告，哈哈，又到了大家最喜欢的广告环节

最后的最后的最后，使劲上下拉动页面，那个灰色的模块就会出现弹动效果了（bounce页面效果），记得要在浏览器的移动端奥

移动端touch事件实现页面弹动--小插件相关推荐

最新文章

热门文章