按照上面的技術方案實施，具體過程為：
禁用頁面頂部下拉事件 ------> 將頁面的主體內容用乙個div容器包含起來，同時複製需要放大處理的內容節點至主體內容之外 ------> 繫結頁面滑屏事件 ------> 計算滑屏偏移量以及縮放等數值的運算 ------> 根據變化數值主體內容transfrom下滑，同時複製的節點做放大動效處理 ------> 監聽滑屏事件結束，執行回彈動效，還原初始狀態
**節選片段：
要點及說明：
1、禁用頁面頂部下拉事件：
該技術要點是阻止預設事件的下拉，從而將下拉事件繫結到我們的動效中。阻止預設事件我們一般可以這樣子處理：
這裡最好的乙個處理方法是可以在webview的層面上去禁止頁面下拉。
2、需判斷滑屏方向，避免橫向滑動干擾下拉動效。公式計算：
x = 絕對值（當前座標x - 初始座標x）
y = 絕對值（當前座標y - 初始座標y）
計算結果x大於y，則為橫向滑動，反之為豎向滑動。
3、滑屏偏移量，縮放動效及下拉動效的數值公式計算
4、動效結束，慣性回彈動效
回彈效果是模擬慣性的曲線運動，由前面**片段中的 to() 動畫函式完成。下面是曲線運動函式：
該方法**於alloytouch元件。
5、存在的待優化問題：
滑屏動效與原生動效在細節上還是有差別，具體演算法有待更進一步的優化。
至此，頂部的banner圖放大的動效已經完成。
除了頂部的banner圖可以這樣子玩，我們還嘗試了更多花樣，例如頂部的slider輪播圖也增加下拉放大的動效。由於這裡的結構更為複雜，且slider輪播圖的內容會改變的，因此放大動效部分的內容也需要保持更換。實現後的效果如下：
注：因為部分安卓效能較差，會影響動畫效果，此效果在ios手機體驗效果更佳。
另外，除了在現有元素上做動畫，我們也可以下拉時增加一些有趣的元素，例如彩蛋、品牌元素等，實現方法與上面一致，只是不需要拷貝dom結構那一步，而是直接寫乙個需要運行動效的dom結構。實現後的效果如下：
前面我們已經實現了下拉動效，那麼我們是否可以繼續擴散思路，也可以用在別的場景呢？比如我們在頁面滑到底部時可以拉出乙個有趣的動畫作為彩蛋。
答案是肯定的，do it！
技術方案與實現
這裡下拉動效與上滑動效實現原理基本一致，但不同的是需要監聽頁面滾動到底部，然後再觸發動效。
部分**如下：
最後的演示效果演示如下：
H5全屏滑動
移動web時代，學會做一些簡單h5頁面會很受用。比如最常見的活動營銷簡歷h5頁面是乙個全屏滾動頁面 fullpage 以下就是乙個簡單的例子。demo demo位址 新建乙個空的html5頁面,在head標籤裡面加入兩個meta標籤 就是這樣的乙個空的頁面了。body section h1.main...
H5禁止頁面滑動 滾動
禁止頁面滾動 有三種方法 1，依靠css 將頁面 document.documentelement.style.overflow hidden document.body.style.overflow hidden 手機版設定這個。如果設定了如上，頁面的滾動條將會消失，此時滑鼠滾輪失效。但是 你用鍵...
h5放大縮小，滑動檔案
用hammer.js放大縮小 加上以下 可以滑動。不然設定掛載縮放事件後滑動不了 let hand new hammer node,蘋果要插入以下 避免第二部加入touchaction後造成的問題 document.addeventlistener gesturestart function eve...