Во время мобильной разработки мы часто сталкиваемся с скользящими событиями. Как мы все знаем, скольжение по мобильным телефонам в основном опирается на события сенсорных. Недавно мы столкнулись с двумя страницами, которые имеют сходные эффекты с переполнением: Auto. Как правило, это может быть достигнуто с помощью настроек CSS (хотя это немного уродливо), но как только переполнение: Автоэлемент отвечает на события прикосновения, будет много неудобств. Например, определенный элемент в полной плате автоматически скользит. Мы можем использовать Normalscrollements, чтобы элемент не скользил на следующий экран при скольжении, но когда элемент скользит внизу, он не может ответить на следующее событие экрана. То же самое верно для скольжения вверх. В настоящее время для ответа необходимо событие Touch. Для удобства инкапсуляции в будущем просто инкапсулируется плагин jQuery, и в то же время мы также рассмотрим события подключаемого модуля JQUERY и события Touch;
Общая идея плагина заключается в следующем: область в коробке представляет собой родительский элемент с фиксированной шириной и высотой (установленная переполнение: скрыта), а высота дочернего элемента больше, чем у родительского элемента. Мы изменяем значение переводчика детского элемента, отвечая на событие сенсорного движения (также возможна вершина, но эффективность перевода выше). Конечно, в течение этого периода мы должны судить о границе перевода значения дочернего элемента, максимум равен 0, а минимум является высота элемента дочернего элемента.
PS: Если вы хотите переместить дочерний элемент в соответствии с пальцем, вам нужно написать другую программу после выпуска пальца и вернуться к границе.
Давайте написать плагин шаг за шагом
Первый шаг - установить безопасную область
; (function ($) {// вставить код}) (jQuery) Если нам нужно вызвать метод $ ("#id"). xx (), нам нужно написать его, как ниже, здесь, здесь FN и JQuery; $.Давайте посмотрим на метод SimusCroll в приведенном выше коде. Это конструктор. Он принимает два параметра. Ele - это элемент, который в настоящее время принимает события сенсорных событий (как правило, можно установить как родительский элемент), опция - это параметры конфигурации, передаваемые пользователем, например, изменение элемента перевода, высота детского элемента родительского элемента, дополнительная высота, которую необходимо добавить, функция обратного вызова, выполняемая при скольжении вверх или внизу и т. Д.
var simuscroll = function (ele, option) {this.settings = {target: ele, // элемент события Changetarget: '', OuterHeight: '800', // Внешняя высота innerheight: '500', // InnerHeight Extra: '0', // Extra Distry Swipeup: Null, SwipeDown: null, vertican; jquery.extend для получения совершенно нового объекта this.opt = jquery.extend ({}, this.settings, option); this.initnumber = this.lastnumber = this.result = 0; this.flag = false; // Рассчитать разницу между дочерним элементом и родительским элементом, чтобы определить максимальное расстояние скольжения элемента this.diff = parsefloat (this.opt.innerheight) - parsefloat (this.opt.outerheight) + parsefloate (this.opt. <0? 0: this.diff; this.direction = '';};При расширении прототипа jQuery первым шагом является создание экземпляра вышеуказанного конструктора, а второй шаг непосредственно вызывает метод инициирования конструктора. См. Примечание ниже для деталей.
init: function () {// jQuery объект непосредственно связывает событие Touch, чтобы получить событие, необходимо получить атрибут события нативного объекта // jQuery объект получает pagex event.originalevent.touches [0] .pagex // domebe event.touches [0] .pagex var target = this.opt.target.get (0); // Если высота дочернего элемента больше, чем родительский элемент, выполните событие скольжения, в противном случае выполните функцию обратного вызова this.flag = this.diff> 0? «Перевести»: «exec»;/*Если элемент установил любое из преобразования, масштабирования, перекоса и вращения в преобразовании, тогда мы напрямую установим преобразование: Translatey (10px) и перезаписываем первоначальные атрибуты набора. Таким образом, мы можем не только обеспечить исходные атрибуты, получая значение матрицы элемента, но и установить любое значение*/var csstext = this.opt.changetarget.css ('-webkit-transform'); if (csstext == 'none') {// элемент не установил атрибут преобразования this.str = this.opt.vertical? 'translatey': 'translatex';} else {this.str = csstext; var reg = /-?/d+/.?/d*/g; // Регулярное выражение/*Получить значение матрицы, полученное непосредственно по каждому параметру в матрице, аналогична матрице (1,0,0,1,0,0) и полученной по матрице (1,0,0,1,0,0), чтобы мы могли арбитально изменять 5 -й элемент определенного значения, как значение Translatex из элемента, и 6 -й элемент является переведенным значением*, это первое значение*. this.str.match (reg); this.matrix = this.opt.vertical? 6: 5; // может определить значение, которое должно быть изменено как Transtatey или Translatex на основе пропущенных параметров} var _This = this; // родительский элемент связывает событие сенсорного, передает объект события и ContextTarget.AddeventListener ('touchStart', function (e) {_ this.start (e, _this)}); target.addeventListener ('touch Move ', function (e) {_ this.move (e, _this)});Метод TouchStart относительно прост, и начальное значение пальца касается экрана записано в соответствии с направлением, которое вам нужно для скольжения.
start: function (e, context) {e.preventDefault (); var touchs = e.touches [0]; context.initnumber = context.opt.vertical? touchs.pagey: touchs.pagex;},Метод Touchmove в основном изменяет атрибуты CSS элемента динамически в зависимости от расстояния скольжения пальца, так что элемент может двигаться с пальца
Метод SetNumber имеет только одно предложение: this.params.splice (n-1,1, номер) матриц изменения в соответствии с пропущенными параметрами
MOVE: function (e, context) {e.preventDefault (); var touchs = e.touches [0]; number = context.opt.pertical? touchs.pagey: touchs.pagex; // Получить значение изменения по сравнению с пальцем, касающимся экрана var delta = number - context.intnumber; if (context.flag == 'transtate') {// Если вам нужно скользить контекст. 0: context.result; context.result = -context.result> context.diff? -context.diff: context.result; // Динамическое настройка элемента CSS Атрибут if (context.matrix) {switch (context.matrix) {case 6: context.setnumber (6, context.result) Break; случай 5: context.setnumber (5, context.result) break;} context.opt.ChangetArget.css ('-webkit-transform', 'matrix ('+context.par ams.join (',')+')')} else {context.opt.changetarget.css ('-webkit-transform', context.str+'('+context.result+'px)')}}},,Touchend определяет, должна ли функция обратного вызова выполнения во время выпуска
END: function (e, context) {e.preventDefault (); var touchs = e.changedtouches [0]; var number = context.opt.vertical? touchs.pagey: touchs.pagex, n = number - context.initnumber; // Когда расстояние скольжения элемента больше 10, а значение перевода начального элемента равно 0, а функция обратного вызова существует, затем выполните функцию обратного вызова if (n> 10 && context.lastnumber == 0 && context.opt.swiphedown) {context.opt.swiphant (). context.lastnumber == -context.diff && context.opt.swipeup) {context.opt.swipeup ();} // Установите постоянную значение для результата, чтобы обеспечить множественную последовательную ситуацию скольжения.По сути, простой плагин jQuery завершен, каркас заключается в следующем
; (function ($) {var a = function (m, n) {// content function}; a.prototype = {init: function () {}, start: function () {}, move: function () {}, end: function () {}, setnumber: function ()}} $. obj.init ()}}) (jQuery)При вызове следующее:
$ (". Overt"). SimusCroll ({'OuterHeight': $ (". Overt"). Height (), 'innerheight': $ ('. Inner'). Height (), 'Changetarget': $ (". inner"), 'Swipeup': function () {console.log ('up')}, 'Swipedown': function () {console.log ('down')}, вертикаль: true})Выше приведено эффект прокрутки переполнения моделирования JS+CSS3, введенный вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!