日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

jquery實現移動端按鈕組左右滑動_jquery

作者:高彬 ? 更新時間: 2022-05-01 編程語言

本文實例為大家分享了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

欄目分類
最近更新