jquery怎么實現(xiàn)移動端按鈕組左右滑動

本文小編為大家詳細(xì)介紹“jquery怎么實現(xiàn)移動端按鈕組左右滑動”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“jquery怎么實現(xiàn)移動端按鈕組左右滑動”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

學(xué)習(xí)移動端觸摸相關(guān)功能時寫了一個例子，共享一下，其中最不好理解的是screen、page、client相對坐標(biāo)的問題，我畫了一個簡圖幫助記憶：

jquery插件源碼：

//按鈕滑動插件
    +(function ($, w, d, undefined) {
 
        jQuery.fn.slideLeftRight = function () {
            var start = null;//每一次觸屏的開始位置
            var current = 0;//滑動過程中的位置
            var end = 0;//滑動結(jié)束時的觸屏位置
            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);

讀到這里，這篇“jquery怎么實現(xiàn)移動端按鈕組左右滑動”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。