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

日期:2020-09-16 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

该软件乃本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的软件之挪动端无缝拼接向上翻转并左右触碰拖动

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

上一篇:phonegap常见恶性事件总结(必看篇) 返回下一篇:没有了