根据zepto的软件之挪动端无缝拼接向上翻转并左右

日期：2021-01-19 类型：科技新闻我要分享

关键词：ps网页版在线制作，静态网页制作方法，微云网页版，怎么制作一个网页，django网页模板

该软件乃本blog作者所写，目地在于提高作者的js工作能力，也给1些js菜鸟在应用软件时出示1些便捷，老鸟就悠然地飞过吧。

企业的挪动端新项目是根据zepto的，有1个网页页面规定文本可以无缝拼接地不断向上翻转，但查了在网上的材料，大多数全是根据jquery的，尽管稍作改动便可以用于挪动端，但不可以完成触碰左右滚翻。因此就去了zepto的官方网站查询其API，却发现假如要应用zepto的swipe()方式，必须引入其早已封裝好的touch.js文档，我就赶快引入了这个js文档，可在具体检测中，官方网站得出的touch.js文档不可以可用于swipe()方式，因而，1头雾水，再次查材料，因为在网上有关zepto层面的物品较少，因此，也沒有找出其不可以可用于swipe()方式的缘故。后来，无意间间发现由百度搜索云Clouda精英团队开发设计的1个touch.js（现阶段，该js也是由这个精英团队在维护保养），在这个js自然环境下竟然能应用swipe()方式，因而，赶快拿来检测。結果很OK哇！这里要侧重谢谢百度搜索云Clouda精英团队，你们真牛！！！在这里要留意，zepto自身是沒有animate()方式的，它是将这个方式封裝变成1个fx.js（去官方网站免费下载），因此在应用animate()时要引入fx.js。

若您感觉本软件有bug或不够的地方，请留言，我将立即改动，感谢！

下列是根据zepto的挪动端无缝拼接向上翻转并左右触碰拖动软件的详细编码：

HTML一部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf⑻">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<title>无题目文本文档</title>
<style>
*{margin:0;padding:0}
li{list-style:none;}
.box{margin:20px;width:200px;height:128px;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>222222</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.min.js"></script>
<script src="zepto.textSlider.js"></script>
<script>
$(function(){
    $(".box").textSlider({
        speed: 50, //标值越大，速率越慢
        line:10    //触碰滚翻的条数
    });
    })
</script>
</body>

软件 zepto.textSlider.js 一部分：

/*
* textSlider 0.1
* Copyright (c) 2014 tnnyang 
* Dependence Zepto v1.1.6 & fx.js & touch-0.2.14.min.js
* Author by 小坏
*/ 
(function($){
    $.fn.textSlider = function(options){
    //默认设置配备
    var defaults = {
        speed:40,  //翻转速率,值越大速率越慢
        line:1     //翻转的行数
    };
    
    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);   //保证每次全是从0刚开始，防止颤动
                        $(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);
        }
        
        //触碰刚开始
        _this.on('touchstart', function(ev){
            ev.preventDefault();
            clearInterval($timer);
        });
        
        //向上拖动
        _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);
            }
        });
        
        //向下拖动
        _this.on('swipedown', 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);
            }
        });
        
        //触碰完毕
        _this.on('touchend',function(ev){
            ev.preventDefault();
            if($ul.height() > _this.height()){
              marquee(_this, speed);
            }
        });        
    });
  }
})(Zepto);

DEMO免费下载：根据zepto的软件之挪动端无缝拼接向上翻转并左右触碰拖动

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：HTML5中form怎样关掉全自动进行作用的方式返回下一篇：没有了