jquery实现移动端按钮组左右滑动
作者:高彬
这篇文章主要为大家详细介绍了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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。