动手之前的打盹

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

    linux mkdir 命令用来创建指定的名称的目录,要求创建目录的用户在当前目录中具有写权限,并且指定的目录名不能是当前目录中已有的目录. 1．命令格式: mkdir [选项] 目录... 2．命令 ...

  2. latex中pdflatex与xelatex的区别

    1. PDFTeX程序:Tex语言的一个实现,也就是把Tex语言转换为排版的一个程序.它会把TeX 语言写的代码直接编译成 PDF文件. 2. PDFLaTeX命令:PDFTeX程序中的命令,用来编译 ...

  3. python进阶学习（一）

    同样是<python基础教程(第二版)>的内容,只是后面内容学起来,相比前面会比较有趣,也更加实用,所以,将"基础"改为"进阶". python 电 ...

  4. solr-geohsah 按照距离搜索分组

    通过solr的domain-import,将mysql的数据通过查询,导入到solr中.java通过使用solrj,链接solr,调用domaininport,并将分页参数设置到domain-impo ...

  5. SpringMVC + Mybatis bug调试 SQL正确，查数据库却返回NULL

    今天碰到个bug,有点意思 背景是SpringMVC + Mybatis的一个项目,mapper文件里写了一条sql 大概相当于 select a from tableA where b = &quo ...

  6. ctf常见php弱类型分析

    1. 布尔反序列化 $unserialize_str = $_POST['password']; $data_unserialize = unserialize($unserialize_str); ...

  7. .net分布式压力测试工具(Beetle.DT)

    肯定有人会问为什么会写这样一个开源工具?和现有的有什么差别?不过对于一个程序员来说写东西还真不需要理由的:),主要原因是工作有点闲(开玩笑),不过说实话一个程员怎可能会停止写代码呢(作为一个奔4的程序 ...

  8. 201521123022 《Java程序设计》 第七周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 Q1.ArrayList代码分析 Q1.1 解释ArrayList的contains源代码 ArrayLis ...

  9. 201521123085 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  10. CustomDialog——一个多功能、通用、可自定义的Dialog

    CustomDialog--一个多功能.通用.可自定义的Dialog  依赖 compile 'com.github.SiberiaDante:CustomDialog:v1.0.1'  说明[Cus ...