Zepto-based plug-ins seamlessly scroll up and move up and down the zepto instance code.

Zepto-based plug-ins seamlessly scroll up and move up and down the zepto instance code.

This plug-in is written by the author of this blog. It aims to improve the author's js capabilities and provide some convenience for some js cainiao to use the plug-in. Let's fly over it.

The company's mobile project is based on zepto, and there is a page that requires the text to be seamlessly rolled up, but most of the information on the Internet is based on jquery, although it can be used for mobile terminals with slight modifications, it cannot roll up or down the touch. So I went to the zepto official website to check its API, but found that if you want to use zepto's swipe () method, you need to reference its encapsulated touch. js file, I quickly referenced this js file. In actual testing, the official website provided touch. the js file cannot be used in the swipe () method. Therefore, I am confused and continue to check the information. Because there are few items about zepto on the internet, I have not found out that it cannot be used in swipe () method. Later, we accidentally discovered a touch developed by the Baidu cloud Clouda team. js (currently, this js is also maintained by this team). In this js environment, the swipe () method can be used, so we need to test it quickly. The result is OK! Thanks to the Baidu cloud Clouda team !!! Note that zepto itself does not have the animate () method. It encapsulates this method into a fx. js (go to the official website to download), so reference fx when using animate. js.

If you think this plug-in has bugs or deficiencies, please leave a message and I will modify it in time. Thank you!

The complete code for zepto-based mobile terminal to seamlessly scroll up and move up and down the slide plug-in is as follows:

HTML section:

<! DOCTYPE html> 
Plug-in zepto. textSlider. js section:
/** TextSlider 0.1 * Copyright (c) 2014 tnnyang * Dependence Zepto v1.1.6 & fx. js & touch-0.2.14.min.js * Author by small bad */(function ($) {$. fn. textSlider = function (options) {// default configuration var defaults = {speed: 40, // scroll speed, the greater the value, the slower the line: 1 // number of rows to scroll }; var opts = $. extend ({}, defaults, options); var $ timer; function marquee (obj, _ speed) {var top = 0; var margintop; $ timer = setInterval (function () {top ++; margintop = 0-top; obj. find ("ul "). animate ({marginTop: margintop}, 0, function () {var s = math.abs(parseint((this).css ("margin-top"); if (s> = 20) {top = 0; optional (this).css ("margin-top", 0); // make sure that each operation starts from 0 to avoid jitter $ (this ). find ("li "). slice (0, 1 ). appendTo ($ (this) ;}}, _ speed) ;}this. each (function () {var speed = opts ["speed"], line = opts ["line"], _ this = $ (this); var $ ul = _ this. find ("ul"); if ($ ul. height ()> _ this. height () {marquee (_ this, speed);} // touch start _ this. on ('touchstart', function (ev) {ev. preventDefault (); clearInterval ($ timer) ;}); // slide upwards _ this. on ('swipeup', function (ev) {ev. preventDefault (); clearInterval ($ timer); if ($ ul. height ()> _ this. height () {for (I = 0; I <opts. line; I ++) {$ ul. find ("li "). first (). appendTo ($ ul) ;}$ul.css ("margin-top", 0) ;}}); // slide down _ this. on ('swipeid', function (ev) {ev. preventDefault (); clearInterval ($ timer); if ($ ul. height ()> _ this. height () {for (I = 0; I <opts. line; I ++) {$ ul. find ("li "). first (). before ($ ul. find ("li "). last () ;}$ul.css ("margin-top", 0) ;}}); // touch finish _ this. on ('touchend', function (ev) {ev. preventDefault (); if ($ ul. height ()> _ this. height () {marquee (_ this, speed) ;}}) ;}}) (Zepto );
DEMO download: zepto-based plug-ins seamlessly scroll up and move up and down
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.