How to realize the left and right sliding of the button group on the mobile terminal by jquery

In this article, the editor introduces in detail "how to realize the mobile button group sliding by jquery". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to realize the mobile button group sliding left and right by jquery" can help you solve your doubts. Let's follow the editor's ideas to learn new knowledge.

When learning mobile touch-related functions, I wrote an example and shared it. The most difficult thing to understand is the relative coordinates of screen, page and client. I drew a schematic diagram to help memorize:

Jquery plug-in source code:

/ / Button Slide plug-in + (function ($, w, d, undefined) {jQuery.fn.slideLeftRight = function () {var start = null;// start position of each touch screen var current = 0 this / position during sliding var end = 0 this position of the touch screen at the end of the slide / position / / object agent $(this) .css ({"white-space": "nowrap", "position": "absolute", "left": 0, "overflow": "hidden"}) .parent () .css ({"position": "relative", "overflow": "hidden"}); _ this = this; var wwidth=$ (window). Width () / / browser width / / object left location 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) {/ / left / / the width of the browser is less than the width of the object if (objWidth > wwidth) {/ / width of the object-object left

< 浏览器的宽度 if (objWidth - Math.abs( _obj_left) < wwidth) { var objLeft = objWidth - wwidth; $(_this).animate({ "left": -objLeft }); _obj_left = -objLeft; } } else { //浏览器的宽度 >

= width of the object $(_ this) .animate ({"left": "0"}); _ obj_left = 0;}} else if (start 0) {$(_ this) .animate ({"left": "0"}) _ obj_left = 0;});}) (jQuery, window, document) After reading this, the article "how to slide the button group around the mobile terminal with jquery" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.