本文小编为大家详细介绍“jquery怎么实现移动端按钮组左右滑动”,内容详细,步骤清晰,细节处理妥当,希望这篇“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);
读到这里,这篇“jquery怎么实现移动端按钮组左右滑动”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。