Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to achieve seamless scrolling up and down and touch and slide up and down on the mobile based on the zepto plug-in. The editor thinks it is very practical, so I hope you can get something after reading this article.

HTML section:

Untitled document * {margin:0;padding:0} li {list-style:none;} .box {margin:20px;width:200px;height:128px;overflow:hidden;border:1px solid # ccc;padding:5px 10px 15pxash Font talk sizev14px;} .box ul li {line-height:20px } 11111111122222222 2222222202 33333303 4444444404 555555505 66666606 1111111122222202 33333303 4444444404 555555505 6666666606 $(function () {$(".box"). TextSlider ({speed: 50, / / the higher the number, the slower the number of line:10 / touch rolls};})

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 Bad * / (function ($) {$.fn.textSlider = function (options) {/ / default configuration var defaults = {speed:40, / / scroll speed, the higher the value, the slower the line:1 / / number of rows scrolled} 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}, 0top function () {var s = Math.abs (parseInt ($(this) .css ("margin-top"); if (s > = 20) {top = 0 $(this) .css ("margin-top", 0); / / make sure to start with 0 every time, 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 up _ this.on ('swipeup', function (ev) {ev.preventDefault (); clearInterval ($timer); if ($ul.height () > _ this.height ()) {for (iSittI _ this.height () {for (iTun0) I _ this.height () {marquee (_ this, speed);}});});}}) (Zepto) On "based on the zepto plug-in how to achieve seamless mobile scrolling up and down touch slide" this article shares here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.