移動端滑動操作學習

(function(window,document){var Slide = function(box,judge,fun){if (!(this instanceof Slide)) return new Slide(box,judge,fun);var startx,starty;box.addEventListener("touchstart", function(e) {e.preventDefault(); // 阻止瀏覽器默認事件startx = parseInt(e.touches[0].pageX);starty = parseInt(e.touches[0].pageY);//獲取滑動開始的X,Y值}, false);box.addEventListener("touchend", function(e) {e.preventDefault(); // 阻止瀏覽器默認事件var endx, endy;endx = parseInt(e.changedTouches[0].pageX);endy = parseInt(e.changedTouches[0].pageY);//獲取滑動結束的X,Y值var absx =startx-endx; var absy =starty-endy;//console.log(absx,absy,absy,3)if(judge=="about" || judge=="aboutupdown"){//檢測左右滑動if(Math.abs( absx)>Math.abs(absy)&&Math.abs(absy)>=3){if(absx>0){fun.leftslide();}else {fun.rightslide();}}}if(judge=="updown" || judge=="aboutupdown"){//檢測上下滑動if(Math.abs( absy)>Math.abs(absx)&&Math.abs(absx)>=3){if(absy>0){fun.topslide()}else {fun.bottomslide()}}}})}window.Slide = Slide;
})(window,document)

調用方法

 //第一個參數為DOM對象Slide(box,"about",{//第二個參數有三個值:左右滑動:about,上下滑動:updown,上下左右:aboutupdownleftslide:function(){//第三個參數可傳入滑動后的操作方法alert("向左滑動了")},rightslide:function(){alert("向右滑動了")},topslide:function(){alert("向上滑動了")},bottomslide:function(){alert("向下滑動了")}})

?

轉載于:https://www.cnblogs.com/xueyunNO1/p/10136384.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/387742.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/387742.shtml
英文地址,請注明出處:http://en.pswp.cn/news/387742.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

深入學習Oracle分區表及分區索引

關于分區表和分區索引(About Partitioned Tables and Indexes)對于10gR2而言,基本上可以分成幾類: ?    Range(范圍)分區 ?    Hash(哈希)分區 ?    List(列表)分區 ?    以及組合分區:Range-Hash,R…

跟隨我在oracle學習php(21)

變量間的傳值方式 總體說明: 1,這里討論的傳值方式是指:一個變量對另一個變量 2,它不僅僅適用于賦值語句,也適用于其他有同樣含義的語句,比如:函數的實參到形參 3,傳值方式只有2種&a…

分區索引常用命令

一般使用LOCAL索引較為方便,而且維護代價較低,并且LOCAL索引是在分區的基礎上去創建索引,類似于在一個子表內部去創建索引,這樣開銷主要是區分分區上,很規范的管理起來,在OLAP系統中應用很廣泛;…

面向對象簡述

1,封裝:將對象的屬性集成在 class person:def __init__(self,name,idnum):self.namenameself.idnumidnum 2,繼承:子類自動擁有父類的的封裝,除了非私有之外 class person: def __init__(self,name,idnum): self.namena…

== 和 is 的區別

1. 比較的是值 a2 b2 print(a b) # True lis1 [1,2,3] lis2 [1,2,3] print(lis1 lis2) # True 2.is 是比較的是內存地址 a name print(id(a)) # 內存地址 字符串 a name b name print(a is b) # True 數字 n 10 n110 print(n is n1) # True 小數據池 數字 -5~256 字…

oracle數據量大時候分區索引思路

有一個分區表,按list分區,只有一個本地唯一索引,沒有外鍵和觸發器 當單個分區數量在2000萬以內時,insert效率還可以,每秒2.3-2.5萬條 但數據量越大,速度越慢, 目前單個分區數量達到3億&#xff…

【轉】WPF自定義控件與樣式(3)-TextBox RichTextBox PasswordBox樣式、水印、Label標簽、功能擴展...

一.前言.預覽 申明:WPF自定義控件與樣式是一個系列文章,前后是有些關聯的,但大多是按照由簡到繁的順序逐步發布的等。 本文主要是對文本輸入控件進行樣式開發,及相關擴展功能開發,主要內容包括:…

JVM調優 dump文件怎么生成和分析

1、獲取JVM的dump文件的兩種方式   1. JVM啟動時增加兩個參數: #出現 OOME 時生成堆 dump: -XX:HeapDumpOnOutOfMemoryError #生成堆文件地址: -XX:HeapDumpPath/home/liuke/jvmlogs/ 2. 發現程序異常前通過執行指令,直接生成當前JVM的dmp文件&#x…

關于 Oracle 分區索引的失效和重建

--創建測試表 SQL> create table t as select object_id,object_name from dba_objects;表已創建。SQL> select min(object_id),max(object_id) from t;MIN(OBJECT_ID) MAX(OBJECT_ID)-------------- --------------2 76083SQL> create table t_part(object…

【網絡安全/CTF】unseping 江蘇工匠杯

該題考察序列化反序列化及Linux命令執行相關知識。 題目 <?php highlight_file(__FILE__);class ease{private $method;private $args;function __construct($method, $args) {$this->method $method;$this->args $args;}function __destruct(){if (in_array($thi…

yum配置中driver-class-name: com.mysql.jdbc.Driver報錯

錯誤&#xff1a; 原因&#xff1a; 解決方法&#xff1a;把方框中的<scope>runtime</scope>刪掉 轉載于:https://www.cnblogs.com/zly123/p/10834958.html

gitlab中的CI

https://blog.csdn.net/chengzi_comm/article/details/78778284 轉載于:https://www.cnblogs.com/effortsing/p/10142720.html

增加表空間大小的四種方法

增加表空間大小的四種方法Meathod1&#xff1a;給表空間增加數據文件ALTER TABLESPACE app_data ADD DATAFILED:\ORACLE\PRODUCT\10.2.0\ORADATA\EDWTEST\APP03.DBF SIZE 50M;Meathod2&#xff1a;新增數據文件&#xff0c;并且允許數據文件自動增長ALTER TABLESPACE app_data …

Red Hat 8.0中設置光盤為軟件源

為什么80%的碼農都做不了架構師&#xff1f;>>> 以管理員身份登錄 su 編輯設置軟件源的repo文件 gedit /etc/yum.repos.d/redhat.repo 粘貼如下文本至空白處&#xff1a; [InstallMedia] nameRed Hat Enterprise Linux 8.0.0 mediaidNone metadata_expire-1 gpgche…

C++11并發編程:多線程std::thread

一&#xff1a;概述 C11引入了thread類&#xff0c;大大降低了多線程使用的復雜度&#xff0c;原先使用多線程只能用系統的API&#xff0c;無法解決跨平臺問題&#xff0c;一套代碼平臺移植&#xff0c;對應多線程代碼也必須要修改。現在在C11中只需使用語言層面的thread可以解…

圖像特征提取——韋伯局部描述符(WLD)

一、原理及概述 韋伯局部描述符&#xff08;WLD&#xff09;是一種魯棒性好、簡單高效的局部特征描述符。WLD由兩個部分組成&#xff1a;差分激勵和梯度方向。 其具體算法是對于給定的一幅圖像&#xff0c;通過對每個像素進行這兩個分量的計算來提取其差分激勵圖像和梯度方向圖…

Linux下Nagios的安裝與配置

Linux下Nagios的安裝與配置 一、Nagios簡介 Nagios是一款開源的電腦系統和網絡監視工具&#xff0c;能有效監控Windows、Linux和Unix的主機狀態&#xff0c;交換機路由器等網絡設置&#xff0c;打印機等。在系統或服務狀態異常時發出郵件或短信報警第一時間通知網站運維人員&am…

POJ_3262 Protecting the Flowers 【貪心】

一、題面 POJ3262 二、分析 這題要往貪心上面想應該還是很容易的&#xff0c;但問題是要證明為什么比值關系就能滿足。 可以選擇幾個去分析&#xff0c;入1-6 與 2-15 和 1-6 與2-5 和 1-6 與 2- 12。 三、AC代碼 1 #include <cstdio>2 #include <iostream>3 #in…

WebLogic安裝Linux centos7

一、安裝前準備工作&#xff1a; 1、創建用戶useradd weblogic;創建用戶成功linux系統會自動創建一個和用戶名相同的分組&#xff0c;并將該用戶分到改組中。并會在/home路徑下創建一個和用戶名相同的路徑&#xff0c;比如我們創建的weblogic。 注&#xff1a;當然&#xff0…

jquery如何阻止子元素繼承父元素的事件(又稱事件冒泡)

非常簡單&#xff0c;子元素上添加如下代碼即可 1 $(a).click(function(e){ 2 e.stopPropagation(); 3 }); 老版本為event,現在用e就行 轉載于:https://www.cnblogs.com/chengbo2130/p/10152747.html