網站首頁 編程語言 正文
本文實例為大家分享了jquery實現移動端按鈕組左右滑動的具體代碼,供大家參考,具體內容如下
學習移動端觸摸相關功能時寫了一個例子,共享一下,其中最不好理解的是screen、page、client相對坐標的問題,我畫了一個簡圖幫助記憶:
jquery插件源碼:
//按鈕滑動插件 ? ? +(function ($, w, d, undefined) { ? ? ? ? ? jQuery.fn.slideLeftRight = function () { ? ? ? ? ? ? var start = null;//每一次觸屏的開始位置 ? ? ? ? ? ? var current = 0;//滑動過程中的位置 ? ? ? ? ? ? var end = 0;//滑動結束時的觸屏位置 ? ? ? ? ? ? var _this = null;//對象代理 ? ? ? ? ? ? $(this).css({ "white-space": "nowrap", "position": "absolute", "left": 0, "overflow": "hidden" }) ? ? ? ? ? ? ? ? ?.parent().css({ "position": "relative", "overflow": "hidden" }); ? ? ? ? ? ? _this = this; ? ? ? ? ? ? var ?wwidth=$(window).width();//瀏覽器的寬度 ? ? ? ? ? ? //對象left位置 ? ? ? ? ? ? var _obj_left = $(this).css("left") == "auto" ? 0 : parseInt($(this).css("left")); ? ? ? ? ? ? var objWidth = $(_this).width(); ? ? ? ? ? ? $(_this).on({ ? ? ? ? ? ? ? ? touchstart: function () { ? ? ? ? ? ? ? ? ? ? var target = event.changedTouches[0]; ? ? ? ? ? ? ? ? ? ? start = target.pageX; ? ? ? ? ? ? ? ? ? ? current = target.pageX; ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? touchmove: function () { ? ? ? ? ? ? ? ? ? ? var target = event.changedTouches[0]; ? ? ? ? ? ? ? ? ? ? $(_this).css("left", _obj_left + (target.pageX - start)); ? ? ? ? ? ? ? ? ? ? current = target.pageX ? ? ? ? ? ? ? ? }, touchend: function () { ? ? ? ? ? ? ? ? ? ? var target = event.changedTouches[0]; ? ? ? ? ? ? ? ? ? ? end = target.pageX; ? ? ? ? ? ? ? ? ? ? _obj_left = _obj_left + (target.pageX - start); ? ? ? ? ? ? ? ? ? ? ? if (start > end ) { ? ? ? ? ? ? ? ? ? ? ? ? //左 ? ? ? ? ? ? ? ? ? ? ? ? ? //瀏覽器的寬度 小于對象的寬度 ? ? ? ? ? ? ? ? ? ? ? ? if (objWidth > wwidth) { ? ? ? ? ? ? ? ? ? ? ? ? ? ? //對象的寬度 - ?對象left < 瀏覽器的寬度 ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (objWidth - ?Math.abs( _obj_left) ?< wwidth) { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var objLeft = objWidth - wwidth; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(_this).animate({ "left": -objLeft }); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? _obj_left = -objLeft; ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? ? ? ? ? //瀏覽器的寬度 >= ?對象的寬度 ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(_this).animate({ "left": "0"}); ? ? ? ? ? ? ? ? ? ? ? ? ? ? _obj_left = 0; ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? } else if (start <= end) { ? ? ? ? ? ? ? ? ? ? ? ? //右 ? ? ? ? ? ? ? ? ? ? ? ? if (_obj_left > 0) { ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(_this).animate({"left":"0"}); ? ? ? ? ? ? ? ? ? ? ? ? ? ? _obj_left = 0; ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? } ? ? ? ? ? ? }); ? ? ? ? }; })(jQuery, window, document);
原文鏈接:https://blog.csdn.net/dystocia/article/details/78373929
相關推薦
- 2022-11-30 關于頁面加載即執行JQuery的三種方法小結_jquery
- 2022-09-30 docker部署golang?http服務時端口無法訪問的問題解決_docker
- 2023-07-10 分布式緩存之Redis(持久化、主從、哨兵、分片集群)
- 2022-06-08 freertos實時操作系統臨界段保護開關中斷及進入退出_操作系統
- 2022-12-22 一文學會c語言結構體的定義和使用方法_C 語言
- 2024-03-17 bootloader配置權限過高會怎么樣?
- 2023-08-15 vite打包報錯 Rollup failed to resolve
- 2023-07-31 el-tree自定義展示圖標
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支