The plug -in is written by the author of this blog. The purpose is to improve the author's JS ability, and it also provides some convenience for some JS rookies when using the plug -in. The old bird flew over leisurely.
The company's mobile project is based on ZEPTO. There is a page that the text can roll up seamlessly, but the online information is checked. Most of them are based on jQuery. Do not achieve touches up and down. So I went to Zepto’s official website to view its API, but found that if you want to use the Zepto Swipe () method, you need to quote the touch.js file that it has been packaged. The Touch.js file given by the official website cannot be applied to the swipe () method, so it is confused and continue to check the information. Because there are fewer things on the Internet about Zepto, it is not found that it cannot be applicable to the SWIPE () method. The reason. Later, I inadvertently discovered a Touch.js developed by the Baidu Cloud Clouda team (at present, the JS is also maintained by this team). In this JS environment, you can use the SWIPE () method, so quickly test it. The result is ok! Thanks to Baidu Cloud's Clouda team here, you are really cow! Intersection Intersection Pay attention here that Zepto itself does not have the Animate () method. It encapsulates this method into a fx.js (download the official website), so it is necessary to quote fx.js when using animate ().
If you think this plug -in has bugs or shortcomings, please leave a message, I will modify it in time, thank you!
The following is the complete code that seamlessly rolled upwards based on the mobile terminal of Zepto and touch the sliding plug -in up and down:
HTML part:
<! Doctype html> <html> <gead> <meta charset = UTF-8> <meta name = Viewport Content = Width = Device-Width, Initial-Scale = 1.0, Maximum-Scale = 1 .0, user-scalable = no> <Title> Non-Title Documents </Title> <STYLE>*{Margin: 0; Padding: 0} li {list-style: none;}. Box {margin: 20px; width: 200px; height: overflow: hidden ; border: 1px solid #ccc; padding: 5px 10px 15px; font-size: 14px;}. Box ul li {line-height: 20px;} </style> </head> <body> <div class = box> <ul> <li>11111111111222222</li> <li>2222222202</li> <li>3333333303</li> <li>4444444404</li> <li>5555555505</li> <li>6666666606</li > <li> 1111111111 </li> <li> 2222222202 </li> <li> 3333333303 </li> <li> 4444444404 </li> <li> 5555555505 </li> <li> 6666666606 </li> /UL> </DIV> <Script SRC = Zepto.min.js> </Script> <Script SRC = FX.JS> </Script> <Script SRC = TOUCH-0.2.14.js> </Script > <script src = zepto.textslider.js> < /script> <script> $ (function () {$ () {$ (. Box) .TextSlider ({SPEED: 50, the larger the value of the value, the slower the speed Line: 10 / /Touch the number of rolls}));}) </script> </body>Plug -in Zepto.TextSlider.js part:
/ ** TextSlider 0.1* Copyright (C) 2014 TNNYANG* Dependence Zepto V1.1.6 & FX.JS & Touch-0.min.js* Author By*/ (Function ($) {$ .fn.text Slider = function (options) {// default configuration var defaults = {speed: 40, // rolling speed, the larger the value, the slower the number of rows: 1 // rolling line}; 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; This) .css (margin-top, 0); // Make sure it starts from 0 each time, avoid jittering $ (this) .find (li) .slic (0, 1) .aPendto ($ (this)); }});}, _speed);} this.each (function () {varulaed = opts [speed], line = opts [line], _This = $ (this); var $ ul = _This.find (ul) ; if ($ ul.height ()> _this.head ()) {marquee (_this, speed);} // touch starts_This.on ('Touchstart', Function (EV) {EV.PreventDefault (); Erval ($ timer);}); // Swipe upward_this.on ('swipeup', function (ev) {ev.preventdeFault (); Clearinterval ($ Timer); if ($ ul.Height ()> _this.Heightt ()) {for (i = 0; I <Opts.line; I ++) {$ ul.find (li) .first (). Appendto ($ ul);} $ ul.css (margin-top, 0); }}); // Slide down_this.on ('Swipedown', Function (EV) {EV.PreventDefault (); Clearinterval ($ Timer); if ($ ul.heryigh ()> _this.height () {for (i = 0; I <options.line; i ++) {$ ul.find (li) .firt (). BeFore ($ ul.find (li) .last ());} $ ul.css (margin (margin (margin (margin (margin (margin -top, 0);}}); // The end of the touch_This.on ('Touchend', Function (EV) {EV.PreventDefault (); if ($ ul.heryigh ()> _this.heigh ())) {) {) {) {) { marquee (_this, speed);}});});}}); Zepto);The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.