TA的每日心情 | 衰
2017-3-7 10:51 |
|---|
签到天数: 4 天 [LV.2]偶尔看看I
新手上路
- 积分
- 31
|
前几天正好也有这个需求，之前自己写了一段js，万恶的IOS下滑动惯性导致暴力操作有问题。特地结合swiper重写了这个功能。demo如下，请无视一些无关紧要的文字内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;overflow: hidden;
}
body {
background: #fff;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.page2 {
font:18px '微软雅黑' ;
height: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.page2 p,.page2 h4 {padding: 30px;}
.wrap {height: 100%;}
.page1 {height:100%;background:url(images/bg.jpg) no-repeat #2a3c4d;background-size:cover;}
.next {position: absolute;bottom: 5%;left:50%;width: 20px;height:20px;border-right: 2px solid #fff;border-bottom: 2px solid #fff; transform:translateX(-50%) rotate(45deg);}
.movetips {position: absolute;font-size: 12px;text-align:center;top:-20px;color: #818080;width: 100%;}
</style>
</head>
<body>
<div class="wrap">
<div class="page1"><div class="next"></div></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide page2">
<div class="movetips">继续拖动返回上一页</div>
<h4>绝顶聪明</h4>
<p style="font-family:microsoft yahei; line-height:1.8;">一天下午，我同学在建设银行十分无聊的上班，一个穿得很糟糕的女士(神经病患者)来到他窗口，给了他一张纸条要提款。 <br><br>
纸条上赫然写着 <br><br>
'兹派XX同志于贵银行处提取人民币'. <br>
然后是l后面N多个零元。 <br>
落款是***C.P中央办公厅***。 <br><br>
我同学本来想报警,可看该神经病患者女子很认真的样子,想想还是打发给保安算鸟.(~估计保安也是很闲). <br>
果然,保安对该女子说:'你这张条子想要提款,必须先到对面派出所,找所长盖一个章，他盖完章,你再来取钱就没问题啦。' <br>
该女子想都没想，直接就向派出所走去了。(这保安还真不一般,平时有点小看他了). <br><br>
大概十多分钟，排队的顾客慢慢多起来的时候，那个女子兴高采烈的回来了，举着那个条子，说：'人家说啦，办公程序简化了，不用所长批条直接就可以取钱啦。' <br><br>
我这个同学一听到这就不住的感叹:pol.ice队伍里真有高人，一句'高调'就给打发回来了。 <br><br>
我这个同学和保安当时就有点傻了，营业大厅有很多人都在，怕她精神病发作起来影响正常的秩序，只好把值班主管找来了。 <br><br>
主管和女患者在一边聊了几句，问你取钱做什么用呀,女患者说:'取钱买面包,蛋糕,吃的,买穿的'主管指了指不远处的地方，该女子就又高高兴兴地走了。 <br>
保安去请教'高招',主管当时是这样对女患者说的: '我们这里是建行,只有建房子才能到这里取钱。你取钱买吃的,那肯定是粮食了,要去农行,买穿的等东西,取钱要到工商银行才行！' <br>
我同学打心眼里佩服呀,到底是当主管的啊!!!! <br><br>
………… <br>
………… <br>
过了一会儿,该女士又回来了.而且带来了工行的回答:'农行的人说了,这里是农行,只有农民能取钱,我是城市人口,工行的人说了,我们这里是公行,只能公的来取,母的不行!!!!,说我是贱人,要到建行取钱' </p>
</div>
</div>
<!-- Add Scroll Bar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
<script src="js/zepto.min.js"></script>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<script>
$(function(){
var pressY = 0; //初始触摸点位置
var isMove = true; //当前在第一页上
var deltaY; //滑动距离
obj = $(".wrap"); //主框架
topPage = $('.page1'); //第一屏
nextPage = $('.next');
topPage.bind('touchstart',touchStart,false);
function touchStart(e){
e.preventDefault();
var touch = e.changedTouches[0];
pressY = touch.pageY;
if(isMove){
obj.bind('touchmove',touchMove,false);
obj.bind('touchend',touchEnd,false);
}
}
function touchMove(e){
if(isMove){
if (e.targetTouches.length == 1) {//只允许一个触摸点
var touch = e.changedTouches[0];
deltaY = touch.pageY - pressY;
if(deltaY < 0){ //up
obj.css({"-webkit-transition":"0s ease -webkit-transform"});
obj.css({"-webkit-transform":"translate3d(0,"+deltaY+"px,0)"});
}
}
}
}
//page1 end事件
function touchEnd(){
if(deltaY <= -100 && isMove){
moveNext()
}else if((deltaY < 0 && deltaY > -100) || isMove){
recover();
}
setTimeout(function(){
deltaY = 0;
},100);
}
//按钮触发跳转至第二屏
nextPage.on('touchend',function(){
moveNext()
})
function recover(){
obj.css({"-webkit-transition":"0.3s ease -webkit-transform"});
obj.css({"-webkit-transform":"translate3d(0,0,0)"});
setTimeout(function(){//回弹之后删除style，避免再次触发事件时候抖动
obj.removeAttr('style');
},300);
}
function moveNext(){
obj.css({"-webkit-transition":"0.3s ease -webkit-transform"});
obj.css({"-webkit-transform":"translate3d(0,-100%,0)"});
isMove = false;
obj.unbind('touchmove');
}
//swiper
var mySwiper = new Swiper('.swiper-container', {
scrollbar: '.swiper-scrollbar',
direction: 'vertical',
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true,
onTouchEnd:function(swiper){
window.late = mySwiper.getWrapperTranslate();
if(window.late > 40){
obj.css({"-webkit-transition":"0.3s ease -webkit-transform"});
obj.css({"-webkit-transform":"translate3d(0,0,0)"});
setTimeout(function(){
isMove = true;
},500);
}
}
});
})
</script>
</body>
</html>
|
|
发表于 2016-12-1 09:48:23
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
淘帖
发表于 2017-1-3 23:15:01
