起因
最近在写需求的时候遇到一个手机左右滑动切换页面的效果。。其实随便找个插件就可以完成的啦，但页面本身已经用上下滑屏效果的了(fullpagejs)。再在fullpage上下滑动里面再加个左右滑动会不会有冲突，我心中各种方呀，我已经预见要延期，各种被产品骂的结果，有木有。。。于是我只能咬咬牙自己写个简单的左右触屏滑动的效果了。下面上图把我代码放出来，大家看到有不好的地方可以帮我改正下唷！
首先，我先简单定义了css和html1
2
3
4
5
6
7
8
9<style>
*{padding: 0px;margin: 0px;}
.body { width: 100%; height: 100%; overflow: hidden;}
.scroll{overflow: hidden;}
.scroll ul{display: inline-block; width: 100%; height: 100%; white-space: nowrap; font-size:0}
.scroll ul li{display: inline-block; width: 100%; min-height: 100vh; padding: 0;margin: 0;list-style: none; color: #fff; font-size: 400px; text-align: center; line-height: 300px;}
.scroll ul li:nth-child(2n+1){ background: #000;}
.scroll ul li:nth-child(2n){ background: #ff0000;}
</style>
1 | <body> |
别急别急，js要和html、css结合才能创造出优美的动态效果。
下面我们来书写js代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61<script>
var div = document.querySelectorAll(".scroll")[0];
var ul = div.querySelectorAll("ul")[0];
var li = ul.querySelectorAll("li");
var startX = 0;
var moveX = 0;
var index = 0;
var timeOut = null;
var nowB = 0;
var t = 0; //当前时间
var b = 0; //初始值
var c = 0; //变化量
var d = 15; //持续时间
var docWidth = document.body.clientWidth;
//监听触摸事件
div.addEventListener('touchstart', touchStart);
div.addEventListener('touchmove', touchMove);
div.addEventListener('touchend', touchend);
function touchStart(e){
moveX = 0;
startX = e.touches[0].pageX;
}
function touchMove(e){
moveX = e.touches[0].pageX - startX;
}
function touchend(e){
if(moveX > 30 && index < 0){
clearInterval(timeOut);
b = nowB;
index += 1;
c = index*docWidth - b;
_run();
}
if(moveX < -30 && index > -(li.length-1) ){
clearInterval(timeOut);
b = nowB;
index -= 1;
c = index*docWidth - b;
_run();
}
}
function _run(){ //轮播动画
timeOut = setInterval(function(){
t++
if(t>d){
t = 0;
clearInterval(timeOut);
return;
}
var trsX = Linear(t, b, c, d);
ul.style.webkitTransform = "translateX("+trsX+"px)";
nowB = trsX;
}, 1000/60)
}
//tweenjs 里面的匀速函数
function Linear(t, b, c, d) {
return c*t/d + b;
}
</script>
看完这里的时候有的同学会问linear函数是什么？这是一个数学的贝塞尔曲线函数的公式而已拉，我只用了一个简单的匀速函数，其实还有很多有用的运动函数，你有兴趣的话可以百度搜索一下tweenJs或者缓动运动函数，你就可以看到更多让人惊讶的函数拉…
优化
其实手机端的话，css3的自身就有很多动画可以借用，而且比自己写流畅，所以下面我们改一下js代码，用css3的动画来更快更优雅的实现1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34<script>
var div = document.querySelectorAll(".scroll")[0];
var ul = div.querySelectorAll("ul")[0];
var li = ul.querySelectorAll("li");
var site = 0;
var startX = 0;
var moveX = 0;
var index = 0;
var reg = /\-?[0-9]+/g;
var docWidth = document.body.clientWidth;
div.addEventListener('touchstart', touchStart);
div.addEventListener('touchmove', touchMove);
div.addEventListener('touchend', touchend);
function touchStart(e){
moveX = 0;
startX = e.touches[0].pageX;
}
function touchMove(e){
moveX = e.touches[0].pageX - startX;
}
function touchend(e){
b = parseInt(ul.style.webkitTransform.match(reg)[0]);
if(moveX > 30 && site < 0){
site += 1;
c = site*docWidth;
}
if(moveX < -30 && site > -(li.length-1) ){
site -= 1;
c = site*docWidth;
}
ul.style.webkitTransform = "translateX("+c+"px)";
}
</script>
总结
css3的transition和cubic-bezier是不是很强大，很简单就可以实现一个轮播拉，如果有疑问或者建议交流的可以私下找我交流一下哦!
吾生有崖而学无涯！！！
注意
记得在手机模式下打开才可以看到滑动效果哦，因为都是touch事件!!!