플러그인은이 블로그의 저자에 의해 작성되었으며, 저자의 JS 능력을 향상시키는 것입니다.
회사의 모바일 프로젝트는 Zepto를 기반으로합니다. 그래서 Zepto의 공식 웹 사이트에 API를 보았지만 Zepto Swipe () 메소드를 사용하려면 Touch.js 파일이 제공 한 Touch.js 파일을 인용해야합니다 공식 웹 사이트는 Swipe () 메소드에 적용 할 수 없으므로 혼란스럽고 인터넷에 Zepto에 대한 정보가 적기 때문에 Swipe () 메소드에 적용 할 수는 없습니다. 이유. 나중에 Baidu Clouda 팀이 개발 한 T 결과는 괜찮습니다! Baidu Cloud의 Clouda 팀 덕분에 여기에서 당신은 정말 소입니다! 교차로 교차로 여기서 Zepto 자체에는 ANIMET () 방법이 없다는 점에주의하십시오.이 방법은 FX.JS (공식 웹 사이트 다운로드)로 캡슐화하므로 Animate ()를 사용할 때 FX.JS를 인용해야합니다.
이 플러그인이 버그 나 단점이 있다고 생각되면 메시지를 남겨주세요. 제 시간에 수정하겠습니다. 감사합니다!
다음은 Zepto의 모바일 터미널을 기반으로 완벽하게 롤링하고 슬라이딩 플러그 인을 위아래로 터치하는 완전한 코드입니다.
HTML 부분 :
<! No> <title> 비 타이틀 문서 </title> <style> {padding : 0 {listyle;}. HIDDEN; 국경 #CCC; 5PX 10PX 15PX; > <ul> <li> 111111111111222222 </li> <li> 2222222202 </li> <li> 333333303 </li> <li> 4444444404 </li> <li> 55555555505 </li> <li> 6666666606 li> <li> 111111111111111111111111111111111111111111111111111111111111111111111111111111111133333 미오까지 </li> <li> 2222222202 </li> <li> 333333303 </li> <li> 4444444404 </li> <li> 55555555555 </li> <li> 6666666606 </li> /ul> </div> <script src = zepto.min.js> </script> <스크립트 src = fx.js> </script> <script src = touch-0.2.14.js> </script> < script src = zepto.textslider.js> < /script> <cript> $ (function () {$ () {$ (. box) .textslider ({speed : 50, 값의 값이 클수록 느리면 스피드 라인 : 10 / /롤 수를 터치}));}) < /script> < /body>플러그인 zepto.textslider.js part :
/ ** TextSlider 0.1* Copyright (C) 2014 Tnnyang* 의존성 zepto v1.1.6 & fx.js & t {// 기본 구성 var defaults = {속도 : 40, // 롤링 속도, 값이 클수록 행의 수가 느려집니다. 1 // 롤링 라인}; , {}, 기본값, 옵션); .find (ul) .animate ({margintop : margintop}, 0, function () {var s = math.abs (parseint ($ (this) .css (margin-top)); if (s> = 20) { top = 0; this));}});}, _speed);} this. 나는 ach (function () {varulaed = opts [speed], line = opts [line], _this = $ (this); var $ ul = _this.find (ul); if ul.height ()> _this.head ()) {marquee (_this, speed);} // t erval ($ timer);}); // upward_this.on ( 'swipeup', function (ev.preventDefault (); clearinterval ($ timer); if ($ ul.height ()> _this.heightt (Heightt) )) {for (i = 0; i <opts.line; i ++) {$ ul.find (li) .first ();} $ ul.css (margin-top, 0). ;}}); i = 0; i 옵션. i ++; 여백 (여백 (여백 ()> _this.heigh ())) {) {) {) {marquee (_this, speed);}});}};위는이 기사의 모든 내용입니다.