移動端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=http://www.cnblogs.com/scale/p/"https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">

正所謂青銅的操作，王者的思想，是時候拿一波五殺了，哈哈哈，還有誰

關鍵還是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頁面效果），記得要在瀏覽器的移動端奧

Tags: quot 頁面移動滑動 gt lt

文章來源：

移動端touch事件實現頁面彈動--小插件

動手之前的打盹

小頁面的搭建

正所謂青銅的操作，王者的思想，是時候拿一波五殺了，哈哈哈，還有誰

強行插波廣告，哈哈，又到了大家最喜歡的廣告環節

最後的最後的最後，使勁上下拉動頁面，那個灰色的模塊就會出現彈動效果了（bounce頁面效果），記得要在瀏覽器的移動端奧

相關文章