快捷導(dǎo)航

jquery實(shí)現(xiàn)移動(dòng)端按鈕組左右滑動(dòng)

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

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

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

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

jquery插件源碼：

//按鈕滑動(dòng)插件
? ? +(function ($, w, d, undefined) {
?
? ? ? ? jQuery.fn.slideLeftRight = function () {
? ? ? ? ? ? var start = null;//每一次觸屏的開(kāi)始位置
? ? ? ? ? ? var current = 0;//滑動(dòng)過(guò)程中的位置
? ? ? ? ? ? var end = 0;//滑動(dòng)結(jié)束時(shí)的觸屏位置
? ? ? ? ? ? var _this = null;//對(duì)象代理
? ? ? ? ? ? $(this).css({ "white-space": "nowrap", "position": "absolute", "left": 0, "overflow": "hidden" })
? ? ? ? ? ? ? ? ?.parent().css({ "position": "relative", "overflow": "hidden" });
? ? ? ? ? ? _this = this;
? ? ? ? ? ? var ?wwidth=$(window).width();//瀏覽器的寬度
? ? ? ? ? ? //對(duì)象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 ) {
? ? ? ? ? ? ? ? ? ? ? ? //左 ?
? ? ? ? ? ? ? ? ? ? ? ? //瀏覽器的寬度 小于對(duì)象的寬度
? ? ? ? ? ? ? ? ? ? ? ? if (objWidth > wwidth) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? //對(duì)象的寬度 - ?對(duì)象left < 瀏覽器的寬度
? ? ? ? ? ? ? ? ? ? ? ? ? ? if (objWidth - ?Math.abs( _obj_left) ?< wwidth) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var objLeft = objWidth - wwidth;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(_this).animate({ "left": -objLeft });
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? _obj_left = -objLeft;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? //瀏覽器的寬度 >= ?對(duì)象的寬度
? ? ? ? ? ? ? ? ? ? ? ? ? ? $(_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);

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

您可能感興趣的文章: