问题描述
- zepto.js 中报错，其中链接的zepto模块有官网上的模块，并添加了touch、动画这几个但
-
<!DOCTYPE html><html><head> <meta charset=""UTF-8""> <meta name=""viewport"" content=""width=device-width initial-scale=1.0 user-scalable=no""> <title>Document</title> <style> *{ margin: 0 auto;} html{height:100%; margin: 0;padding: 0;} body{width:100%;height:100%;margin:0;overflow:hidden; margin:0 auto;} ul{width:100%;height:100%;margin:0;padding:0;overflow:hidden;position:relative;} .clearfix:after { content:""."";display:block;height: 0; clear: both; visibility: hidden;} .clearfix{ display: inline-block;} .clearfix{ display:block;} ul li{list-style:none;width:100%;height:100%;position:absolute;left:0;margin:0;} .on{z-index:999;} </style></head><body> <ul touchDir=""1"" class=""clearfix""> <li class=""sty"" style=""background:#f1076a; display:block;""></li> <li class=""sty"" style=""background:#1f6ee5; display:none;""></li> <li class=""sty"" style=""background:#ef6767;display:none;""></li> <li class=""sty"" style=""background:#5ef6e9;display:none;""></li> <li class=""sty"" style=""background:#2da00e;display:none;""></li> </ul></body><script type=""text/javascript"" src=""zepto/zep.js""></script> <script type=""text/javascript"" src=""zepto/touch.js""></script> <script type=""text/javascript"" src=""zepto/an.js""></script><script type=""text/javascript""> $(function(){ var touchDir=$('ul').touchDir var listBox=$('ul li'); var boxWidth=$('ul').eq(0).width(); var boxHeight=$('ul').eq(0).height(); function NextPage(){ alert(0) console.log('test'); // if(listBox.is(':animated')){return;} if(touchDir===""1""){ if($(this).index()===-1){return;} $(this).next().addClass('on').siblings().removeClass('on'); $(this).next().animate({top:0}500function(){ $(this).position().top=-boxHeight+'px'; $(this).hide(); }) } } function PrevPage(){ // if(listBox.is(':animated')){return;} if(touchDir===""1""){ if($(this).index()===0){return;} $(this).prev().addClass('on').show().siblings().removeClass('on'); $(this).animate({top:boxHeight}500function(){ $(this).hide(); }) $(this).prev().animate({top:0}500); } } listBox.bind(""swipeUp""NextPage()); listBox.bind(""swipeDown""PrevPage()); })</script></html>
解决方案
<!DOCTYPE html>
Document
<br> *{ margin:0 auto;}<br> html{height:100%; margin: 0;padding: 0;}<br> body{width:100%;height:100%;margin:0;overflow:hidden; margin:0 auto;}<br> ul{width:100%;height:100%;margin:0;padding:0;overflow:hidden;position:relative;}<br> .clearfix:after { content:".";display:block;height: 0; clear: both; visibility: hidden;}<br> .clearfix{ display: inline-block;}<br> .clearfix{ display:block;}<br> ul li{list-style:none;width:100%;height:100%;position:absolute;left:0;margin:0;}<br> .on{z-index:999;}<br>
<script type=""text/javascript"" src=""zepto/touch.js""></script><script type=""text/javascript"" src=""zepto/an.js""></script>$(function(){ var touchDir=$('ul').touchDir var listBox=$('ul li'); var boxWidth=$('ul').eq(0).width(); var boxHeight=$('ul').eq(0).height(); function NextPage(){ alert(0) console.log('test'); // if(listBox.is(':animated')){return;} if(touchDir===""1""){ if($(this).index()===-1){return;} $(this).next().addClass('on').siblings().removeClass('on'); $(this).next().animate({top:0}500function(){ $(this).position().top=-boxHeight+'px'; $(this).hide(); }) } } function PrevPage(){ // if(listBox.is(':animated')){return;} if(touchDir===""1""){ if($(this).index()===0){return;} $(this).prev().addClass('on').show().siblings().removeClass('on'); $(this).animate({top:boxHeight}500function(){ $(this).hide(); }) $(this).prev().animate({top:0}500); } } listBox.bind(""swipeUp""NextPage()); listBox.bind(""swipeDown""PrevPage()); })