- <!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>
- 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);
这个css3属性,明白了吧,通过改变这个属性,从而改变了html模块的位置
- transform:translate(0px, 888px)
是干嘛用的,说白了就是个运动曲线,赛贝尔曲线,哎,懂了吧,就是规定你这个html模块如何运动的
- transition-timing-function
这不就来了吗?哈哈,简单吧,都是css3,社会我三哥,人丑话不多
- transition-duration
- 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);
- }
来源: http://www.cnblogs.com/scale/p/7611537.html