动手之前的打盹

  • 说实话真的是好久没有更新博客了，最近一直赶项目，身心疲惫；最关键的是晚上还要回去上一波王者，实在是忙啊！
  • 这周下来，清闲了些许，或许是因为要到国庆的缘故吧，大家都显得无精打采。俗话说的好: ”身在曹营，心在汉!“。早早的就去为祖国庆生去了，哈哈。
  • 是时候表演真正的技术了，那么先来一杯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页面效果），记得要在浏览器的移动端奥

移动端touch事件实现页面弹动--小插件的更多相关文章

  1. H5案例分享：移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  2. kissui.scrollanim页面滚动动画库插件

    简介 kissui.scrollanim是一款实用的纯JS和CSS3页面滚动动画库插件.通过该插件可以使元素进入浏览器视口的时候,展示指定的CSS3动画效果. 下载地址及演示 在线演示 在线下载 安装 ...

  3. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  4. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  5. 移动端touch事件 || 上拉加载更多

    前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...

  6. 移动端 Touch 事件

    在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等.常用的触摸事件有touchstart,touchmove,touchend. 每个事件包含下面三个用于跟踪虎摸的属性: touche ...

  7. 移动端 touch 事件的originalEvent

    对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...

  8. 移动端Touch事件基础

    1.三个常用的移动端事件 ontouchstart 手指按下时触发 ontouchmove 手指移动时触发 ontouchend 手动抬起时触发 注意:这些事件当作事件属性使用时,不兼容谷歌浏览器. ...

  9. 移动端touch事件滚动

    本来想用在北京欢乐谷手机上用touch事件来模拟局部左右内容滚动里,但在touchmove上下滚动时由于禁止了默认事件而body滚动条不能滚动,虽然可以根据touchmove的坐标来判断方向,但体验效 ...

随机推荐

  1. 流畅python学习笔记：第十九章：动态属性和特性

    首先来看一个json文件的读取.书中给出了一个json样例.该json文件有700多K,数据量充足,适合本章的例子.文件的具体内容可以在http://www.oreilly.com/pub/sc/os ...

  2. 每次启动懂maven项目都必须关闭javaw.exe进程

    最近几天一致在搞配置问题,今天总于解决了.下面说问题: 我发现我每次配置完maven build的goals运行,总是会出现TOMCAT绑定接口问题,我做的方法就是不断地关掉JAVAw.exe进程.但 ...

  3. [2012-06-29]sed根据行号范围执行替换

    测试数据: personball@vostro:SHELL$cat aaa <instrumentation android:name="aaa" android:name= ...

  4. 大型网站的 HTTPS 实践（四）——协议层以外的实践

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt390 1 前言 网上介绍 https 的文章并不多,更鲜有分享在大型互联网站 ...

  5. Unity3D安装破解教程（以Unity5.3.4为例）(转)

      Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎.目 ...

  6. YYHS-NOIP2017SummerTraining0914-问题 A: 组合数问题

    题目描述 组合数C(n,m)表示的是从n个物品中选出m个物品的方案数.举个例子,从(1, 2, 3)三个物品中选择两个物品可以有(1, 2),(1, 3),(2, 3)这三种选择方法.根据组合数的定义 ...

  7. 深度神经网络在量化交易里的应用 之二 -- 用深度网络(LSTM)预测5日收盘价格

        距离上一篇文章,正好两个星期. 这边文章9月15日 16:30 开始写. 可能几个小时后就写完了.用一句粗俗的话说, "当你怀孕的时候,别人都知道你怀孕了, 但不知道你被日了多少回 ...

  8. Python 进程与线程小随笔

    Process 涉及模块:multiprocessing Process p = Process() p.start() p.join() from multiprocessing import Pr ...

  9. 转：【Java并发编程】之二十二：并发新特性—障碍器CyclicBarrier（含代码）

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17512983 CyclicBarrier(又叫障碍器)同样是Java5中加入的新特性,使用 ...

  10. java伪代码

    愚公移山的目标是毕力平险,指通豫南,达于汉阴,方法是扣石垦壤,箕畚运于渤海之尾 条件判断if(愚公死了)我的儿子替我完成.循环结构是“子又生孙,孙又生子,子子孙孙无穷匮也” import.java.大 ...