<!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},500,function(){
$(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},500,function(){
$(this).hide();
})
$(this).prev().animate({top:0},500);
}
}
listBox.bind("swipeUp",NextPage());
listBox.bind("swipeDown",PrevPage());
})
</script>
</html>
zepto.js 中报错,其中链接的zepto模块有官网上的模块,并添加了touch、动画这几个但
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答 默认 最新
- xinshoudeyoushang 2015-05-22 09:09关注
<!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>
$(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},500,function(){ $(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},500,function(){ $(this).hide(); }) $(this).prev().animate({top:0},500); } } listBox.bind("swipeUp",NextPage()); listBox.bind("swipeDown",PrevPage()); })<script type="text/javascript" src="zepto/touch.js"></script> <script type="text/javascript" src="zepto/an.js"></script>
解决 无用评论 打赏 举报 -
悬赏问题
- ¥20 关于#硬件工程#的问题,请各位专家解答!
- ¥15 关于#matlab#的问题:期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707,使系统具有较小的超调量
- ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
- ¥30 截图中的mathematics程序转换成matlab
- ¥15 动力学代码报错,维度不匹配
- ¥15 Power query添加列问题
- ¥50 Kubernetes&Fission&Eleasticsearch
- ¥15 報錯:Person is not mapped,如何解決?
- ¥15 c++头文件不能识别CDialog
- ¥15 Excel发现不可读取的内容