原生移動端滑動js

阿新 • • 發佈：2019-01-01

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta 
 content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
</head>
<body>
    <div class="page page1">page1</div>
    <div class="page page2"> 
page2</div>
    <div class="page page3">page3</div>
    <div class="page page4">page4</div>
</body>
</html>
<script>
  // 返回角度  
  function GetSlideAngle(dx, dy) {  
      return Math.atan2(dy, dx) * 180 / Math.PI;  
  }

  //根據起點和終點返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑動   

  function GetSlideDirection(startX, startY, endX, endY) {
      var dy = startY - endY;  
      var dx = endX - startX;  
      var result = 0;  

      //如果滑動距離太短  
      if(Math.abs(dx) < 50 && Math.abs(dy) <50) {  
          return result;  
      }  

      var angle = GetSlideAngle(dx, dy);  
      if(angle >= -45 && angle < 45) {  
          result = 4;  
      }else if (angle >= 45 && angle < 135) {  
          result = 1;  
      }else if (angle >= -135 && angle < -45) {  
          result = 2;  
      }  
      else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {  
          result = 3;  
      }  

      return result;  
  }  

  //滑動處理  
  var startX, startY;  
  document.addEventListener('touchstart',function (ev) {  
      startX = ev.touches[0].pageX;  
      startY = ev.touches[0].pageY;    
  }, false);  
  document.addEventListener('touchend',function (ev) {  
      var endX, endY;  
      endX = ev.changedTouches[0].pageX;  
      endY = ev.changedTouches[0].pageY;  
      var direction = GetSlideDirection(startX, startY, endX, endY);  
      switch(direction) {  
          case 0:  
              // alert("沒滑動");  
              break;  
          case 1:  
              alert("向上");  
              break;  
          case 2:  
              alert("向下");  
              break;  
          case 3:  
              alert("向左");   
              break;  
          case 4:  
              alert("向右");  
              break;  
          default:             
      }  
  }, false);   
</script>

原生移動端滑動js

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-U

移動端滑動條（原生JS）

顏色 empty || 原生 pre border relative innerhtml 課程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

移動端Vue.js的圖片預覽元件，實現放縮、滑動功能的參考

https://segmentfault.com/a/1190000013193690 segmentfault網址http://www.ml-ui.com/#/docs/i-view ml-ui的vue框架https://www.cnblogs.com/Ed

一款簡單實用的上傳文件圖片插件並且兼容移動端zyupload.js

png http ext 選中 nis blog onf 1-1 text 1.下載zyupload插件包包含的文件如下圖： 2.在/images/fileType文件夾下定義上傳文件的顯示圖標如下圖所示： 3.打開zyupload.js，修改上傳後顯示文件圖標

筆記-移動端滑動到底部自動加載下一頁內容

移動端 esc inf 技術分享公司 detail r+ truct get 公司微信公眾號的網頁由ThinkPHP框架的模板生成，由一個需求是滑動到底部時自動加載下一頁內容。 1、網頁結構網頁分為兩個部分，頂部固定導航欄，下部有一個page容器，內部滾動顯示。 2、

關於移動端滑動手勢

drop mobile https htm rop zha obi .html top 背景：基於要嘗試的移動端項目需要有一個通過上拉下滑手勢達成加載不同數據的功能，其涉及到滑動手勢和ajax數據加載方面的知識點。故對整個實現過程做一個記錄整理。個人JS功底有限，看了諸多

移動端通過js來用rem控制字體大小的用法

mar blog max-width size 結束 idt height clas eset 通過js來控制頁面字體大小，直接上代碼： (function() { var rootHtml = $(":root"); var rootResize = function(

做微信公眾號時，移動端滑動效果（swiper插件（display：none））顯示滑動問題

其中 display 顯示 width ren 按鈕沒有描述公眾號　微信公眾號的制作，其中缺少不了希望實現標題、內容、圖片的滑動效果，這時候可以選擇使用（swiper插件）實現相應效果，功能十分強大，鏈接：http://www.swiper.com.cn/

關於Tab切換中嵌套Swiper移動端滑動插件，導致Swiper插件失效的問題

解決 ima true 屬性 tab切換解決辦法 observe 嵌套 bubuko Swiper插件大家都知道的，手機端頁面開發過程中，輪播用這個插件灰常方便的！關鍵是調用簡單，大大的提高了開發的效率；但是在Tab切換中調用，Swiper插件就會出問題，失效了，布局結

vue 中解決移動端使用 js sdk 在ios 上一直報invalid signature 的問題解決

2018年06月13日 14:17:20 嶽小哥閱讀數：343 最近專案需求，需要一個上傳多張圖片的功能，但是出現的問題是在安卓端是沒有問題的，但是在ios上一直都是 invalid signature，但是重新整理頁面就沒有問題了。 Vue

Mysql 實現移動端滑動分頁

很多移動端分頁功能是滑動分頁,當 api 需要提供分頁功能的時候,資料庫端需要使用 procedure 儲存過程. 1. 使用 workbench 或其他的資料庫操作工具新建儲存過程將新建的儲存過程命名為 paging 新建儲存過程程式碼 CREATE DE

移動端rem.js使用方法

下面的程式碼一是我根據rem的使用經驗，自己寫的一個rem.js，發現很好用，能適用所有移動端h5頁面的自適應需求：程式碼一： ``` window.onload = function(){ /*720代表設計師給的設計稿的寬度，你的設計稿是多少，就寫多少;100代表換算比例，這裡寫100是為了以

關於rem換算、移動端通過js控制動態控制rem寬高比的一個函式

(function () { // rem換算zx var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; var do

mui中dtpicker元件--彈出日期選擇器(移動端滑動日曆)

轉自：http://www.menvscode.com/detail/5aab64de539bcc7803385bc9 dtpicker元件適用於彈出日期選擇器，使用dtpicker元件必須要引入 mui.min.js、mui.min.css、mui.picker.min.css、mui.pick

利用js自動檢測pc端和移動端，js程式碼，需要寫兩個網頁，一個pc，一個移動端

假設pc/index.html是pc端的網頁，mobile/index.html是移動端的網頁在外部設定一個html進行判斷，分別跳轉； //判斷如果是pc端，自動跳到pc/index.html //安卓手機自動跳到mobile/

移動端滑動導航條

HTML <div class="tab"> <div class="table-item"> <p>二維碼</p> <p>10</p> </div> <div class

移動端滑動操作學習

(function(window,document){ var Slide = function(box,judge,fun){ if (!(this instanceof Slide)) return new Slide(box,judge,fun); var

swiper的介紹以及使用（移動端滑動螢幕切換頁面案例）

一、swiper介紹 Swiper常用於移動端網站的內容觸控滑動 Swiper是純javascript打造的滑動特效外掛，面向手機、平板電腦等移動終端。 Swiper能實現輪播圖、觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。 Swiper開源、免費、穩定、使用

vue移動端flexible.js結合Muse-ui使用的小坑

因為公司有個專案有webapp的需求，在前期準備的期間考慮過使用ionic，畢竟該專案web端的框架使用的是Angular，專案組的人也都比較熟悉，但是我們畢竟只是做個移動的網頁，不想用ionic那麼繁瑣的東西，最終我還是選了vue。開始的設想是vu

移動端swiper.js中的坑------你怎能錯過！！！！

最近有個移動端日曆的專案，要求有以下幾點： 1，觸屏左右切換； 2，點選上方按鈕左右切換； 3，觸屏和點選上方按鈕是同步的；（如下圖：點選上面的‘9月’，是可以切換噹噹前月，觸屏滑動日曆也是可以切換的）步驟： 1，渲染日曆：日曆是自己開發的（注意幾點：1，獲得當前

原生移動端滑動js

相關推薦