快捷導(dǎo)航

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

更新時間：2022年03月01日 08:33:33 作者：高彬

這篇文章主要為大家詳細介紹了jquery實現(xiàn)移動端按鈕組左右滑動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery實現(xiàn)移動端按鈕組左右滑動的具體代碼，供大家參考，具體內(nèi)容如下

學(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);

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: