網站首頁 編程語言 正文
本文實例為大家分享了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-12-07 Rust?for循環語法糖背后的API場景分析_Rust語言
- 2022-03-26 R語言繪制尺子的實現示例_R語言
- 2023-03-28 Python利用flask操作Redis的方法詳解_python
- 2022-11-26 Qt實現模糊匹配功能的實例詳解_C 語言
- 2023-01-26 Android?源碼淺析RecyclerView?ItemAnimator_Android
- 2022-10-31 sql查詢給表起別名要點小結(涉及嵌套查詢)_oracle
- 2022-04-18 啟動項目: getaddrinfo ENOTFOUND localhost
- 2022-03-28 Go實現用戶每日限額的方法(例一天只能領三次福利)_Golang
- 最近更新
-
- 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同步修改后的遠程分支