微信里经常看到的滑动翻页效果，slide
上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果，今天抽空写了3个小demo（只写了webkit需要chrome模拟手机看 开启touch事件）， 故此写个随笔。
1、demo1，整个大容器tranlateY（性能应该是最好的，但是如果增删一页的话对css影响很大，如果用sass或less除外）
html：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=320.1, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="./demo.css">
</head>
<body> <div class="slide_div">
<div class="slide_page_1 slide_page"></div>
<div class="slide_page_2 slide_page"></div>
<div class="slide_page_3 slide_page"></div>
<div class="slide_page_4 slide_page"></div>
</div> </body>
<script src="../zepto.js"></script>
<script src="demo.js"></script>
</html>
* {
padding:;
margin:;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
.slide_div {
width: 100%;
height: 400%;
position: absolute;
}
.slide_page {
width: 100%;
height: calc(100% / 4);
background-size: 100% 100% !important;
}
.slide_page_1 {
background: url(../img/pic1.jpg) no-repeat;
}
.slide_page_2 {
background: url(../img/pic2.jpg) no-repeat;
}
.slide_page_3 {
background: url(../img/pic3.jpg) no-repeat;
}
.slide_page_4 {
background: url(../img/pic4.jpg) no-repeat;
}
.slide_page:before {
content: '';
position: absolute;
width: 47px;
height: 47px;
margin-left: -23px;
background: url(../img/arrow.png) no-repeat center 0;
-webkit-animation: start 1.5s infinite ease-in-out;
}
.slide_page_1:before {
left: 50%;
top: calc(100% / 4 - 2.5%);
}
.slide_page_2:before {
left: 50%;
top: calc(100% / 4 * 2 - 2.5%);
}
.slide_page_3:before {
left: 50%;
top: calc(100% / 4 * 3 - 2.5%);
}
.slide_page_4:before {
content: none;
}
@-webkit-keyframes start {
0%,30% {opacity:;-webkit-transform: translate(0,10px);}
60% {opacity:;-webkit-transform: translate(0,0);}
100% {opacity:;-webkit-transform: translate(0,8px);}
}
/************ slide up **************/
.slide_animate_up_1 {
-webkit-animation:slide_up_1 .5s ease both;
}
.slide_animate_up_2 {
-webkit-animation:slide_up_2 .5s ease both;
}
.slide_animate_up_3 {
-webkit-animation:slide_up_3 .5s ease both;
}
@-webkit-keyframes slide_up_1 {
100% {
-webkit-transform:translateY(calc(-100% / 4));
}
}
@-webkit-keyframes slide_up_2 {
0% {
-webkit-transform:translateY(calc(-100% * 1/4));
}
100% {
-webkit-transform:translateY(calc(-100% * 2/4));
}
}
@-webkit-keyframes slide_up_3 {
0% {
-webkit-transform:translateY(calc(-100% * 2/4));
}
100% {
-webkit-transform:translateY(calc(-100% * 3/4));
}
}
/************ slide down **************/
.slide_animate_down_0 {
-webkit-animation:slide_down_0 .5s ease both;
}
.slide_animate_down_1 {
-webkit-animation:slide_down_1 .5s ease both;
}
.slide_animate_down_2 {
-webkit-animation:slide_down_2 .5s ease both;
}
@-webkit-keyframes slide_down_0 {
0% {
-webkit-transform:translateY(calc(-100% / 4));
}
100% {
-webkit-transform:translateY(0px);
}
}
@-webkit-keyframes slide_down_1 {
0% {
-webkit-transform:translateY(calc(-100% * 2/4));
}
100% {
-webkit-transform:translateY(calc(-100% * 1/4));
}
}
@-webkit-keyframes slide_down_2 {
0% {
-webkit-transform:translateY(calc(-100% * 3/4));
}
100% {
-webkit-transform:translateY(calc(-100% * 2/4));
}
}
js：
/**
* Created by huangjianhua on 14-12-14.
*/
$(function () {
var cur_page= 0, touchFirst_obj, touchLast_obj, touchEnd_obj, moveY,
slide_range = 30,
page_count = $('.slide_div div').length || 4; $(document).on('touchstart', '.slide_div', function (e) {
e.preventDefault();
touchFirst_obj = {
startY : e.touches[0].clientY
}; }); $(document).on('touchmove', '.slide_div', function (e) {
e.preventDefault();
touchLast_obj = e.touches[0]; moveY = touchLast_obj.clientY - touchFirst_obj.startY;
}); $(document).on('touchend', '.slide_div', function (e) {
// touchEnd_obj = e.changedTouches[0]; //上 或 下
if(moveY > 0) {
//第一页的话 不作处理
if(cur_page == 0) return;
cur_page--;
$(this).attr('class', 'slide_div slide_animate_down_' + cur_page);
} else if(moveY < 0) {
//最后一页的话 return
if(cur_page == +page_count-1) return;
cur_page++;
$(this).attr('class', 'slide_div slide_animate_up_' + cur_page);
}
});
});
2、demo2，单独每页tranlateY（增删一页的话对css和js影响都不大，但是我觉得性能没demo1好）
html一样，
css：
* {
padding:;
margin:;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
.slide_div {
width: 100%;
height: 100%;
}
.hide {
display: none;
}
.current {
display: block;
}
.slide_page {
width: 100%;
height: 100%;
position: absolute;
background-size: 100% 100% !important;
}
.slide_page_1 {
background: url(../img/pic1.jpg) no-repeat;
}
.slide_page_2 {
background: url(../img/pic2.jpg) no-repeat;
}
.slide_page_3 {
background: url(../img/pic3.jpg) no-repeat;
}
.slide_page_4 {
background: url(../img/pic4.jpg) no-repeat;
}
.slide_page_5 {
background: url(../img/pic1.jpg) no-repeat;
}
.slide_page:before {
content: '';
position: absolute;
width: 47px;
height: 47px;
margin-left: -23px;
background: url(../img/arrow.png) no-repeat center 0;
-webkit-animation: start 1.5s infinite ease-in-out;
}
.slide_page_1:before {
left: 50%;
bottom:3%;
}
.slide_page_2:before {
left: 50%;
bottom:3%;
}
.slide_page_3:before {
left: 50%;
bottom:3%;
}
.slide_page_4:before {
content: none;
}
@-webkit-keyframes start {
0%,30% {opacity:;-webkit-transform: translate(0,10px);}
60% {opacity:;-webkit-transform: translate(0,0);}
100% {opacity:;-webkit-transform: translate(0,8px);}
}
/************ slide up **************/
.moveToTop {
-webkit-animation: toTop .5s ease both;
}
.moveFromTop {
-webkit-animation: fromTop .5s ease both;
}
.moveToBottom {
-webkit-animation: toBottom .5s ease both;
}
.moveFromBottom {
-webkit-animation: fromBottom .5s ease both;
}
@-webkit-keyframes toTop {
from { }
to { -webkit-transform: translateY(-100%); }
}
@-webkit-keyframes fromTop {
from { -webkit-transform: translateY(-100%); }
}
@-webkit-keyframes toBottom {
from { }
to { -webkit-transform: translateY(100%); }
}
@-webkit-keyframes fromBottom {
from { -webkit-transform: translateY(100%); }
}
js：
/**
* Created by huangjianhua on 14-12-14.
*/
$(function () {
var cur_page= 0, touchFirst_obj, touchLast_obj, touchEnd_obj, moveY,
slide_range = 30,
page_count = $('.slide_div div').length || 4; $(document).on('touchstart', '.slide_page', function (e) {
e.preventDefault();
touchFirst_obj = {
startY : e.touches[0].clientY
};
}); $(document).on('touchmove', '.slide_page', function (e) {
e.preventDefault();
touchLast_obj = e.touches[0]; moveY = touchLast_obj.clientY - touchFirst_obj.startY; }); $(document).on('touchend', '.slide_page', function (e) {
// touchEnd_obj = e.changedTouches[0]; //上 或 下
if(moveY > 0) {
//第一页的话 不作处理
if(cur_page == 0) return;
cur_page--;
$(this).prev('.slide_page').removeClass('hide').addClass('moveFromTop').addClass('current');
$(this).addClass('moveToBottom'); $(this).on('webkitAnimationEnd', function() {
$(this).prev('.slide_page').removeClass('moveFromTop');
$(this).removeClass('moveToBottom').removeClass('current').addClass('hide');
$(this).off('webkitAnimationEnd');
}); } else if(moveY < 0) {
//最后一页的话 return
if(cur_page == +page_count-1) return;
cur_page++;
$(this).addClass('moveToTop').removeClass('moveFromBottom');
$(this).next('.slide_page').removeClass('hide').addClass('moveFromBottom').addClass('current');
$(this).on('webkitAnimationEnd', function() {
$(this).removeClass('moveToTop').removeClass('current').addClass('hide');
$(this).next('.slide_page').removeClass('moveFromBottom');
$(this).off('webkitAnimationEnd');
}); }
}); });
3、demo3，带吸附功能，是用transition写的（因为之前我们一个活动游戏的指南页使用jq的animate写的，然后低端机卡得一塌糊涂，这次我还特意加上了tranlateZ(0)，我觉得性能怎样也比jquery的animate好）.
html一样的，
css：
* {
padding:;
margin:;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
.slide_div {
width: 100%;
height: 400%;
position: absolute;
}
.slide_page {
width: 100%;
height: calc(100% / 4);
background-size: 100% 100% !important;
}
.slide_page_1 {
background: url(../img/pic1.jpg) no-repeat;
}
.slide_page_2 {
background: url(../img/pic2.jpg) no-repeat;
}
.slide_page_3 {
background: url(../img/pic3.jpg) no-repeat;
}
.slide_page_4 {
background: url(../img/pic4.jpg) no-repeat;
}
.slide_page:before {
content: '';
position: absolute;
width: 47px;
height: 47px;
margin-left: -23px;
background: url(../img/arrow.png) no-repeat center 0;
-webkit-animation: start 1.5s infinite ease-in-out;
}
.slide_page_1:before {
left: 50%;
top: calc(100% / 4 - 2.5%);
}
.slide_page_2:before {
left: 50%;
top: calc(100% / 4 * 2 - 2.5%);
}
.slide_page_3:before {
left: 50%;
top: calc(100% / 4 * 3 - 2.5%);
}
.slide_page_4:before {
content: none;
}
@-webkit-keyframes start {
0%,30% {opacity:;-webkit-transform: translate(0,10px);}
60% {opacity:;-webkit-transform: translate(0,0);}
100% {opacity:;-webkit-transform: translate(0,8px);}
}
/************ transition **************/
.transition_fast {
-webkit-transition: .6s ease;
}
js：
/**
* Created by huangjianhua on 14-12-14.
*/
$(function () {
var cur_page= 0, touchFirst_obj, touchLast_obj, touchEnd_obj, moveY, startTranslateY, currentTranslateY,
slide_range = 130,
page_count = $('.slide_div div').length || 4; $(document).on('touchstart', '.slide_div', function (e) {
e.preventDefault();
touchFirst_obj = {
startY : e.touches[0].clientY
}; $(this).removeClass('transition_fast'); //取translateY的值
var transfrom_info = window.getComputedStyle(e.currentTarget, null).getPropertyValue("-webkit-transform").match(/matrix\((\d+,\s?){1,5}(\-?\d+)/);
startTranslateY = transfrom_info && transfrom_info[2] || 0; $(this).css('-webkit-transform', 'translateY('+ startTranslateY +'px) translateZ(0)');
// console.log(startTranslateY , 'startY',window.getComputedStyle(e.currentTarget, null).getPropertyValue("-webkit-transform")); }); $(document).on('touchmove', '.slide_div', function (e) {
e.preventDefault();
touchLast_obj = e.touches[0]; moveY = touchLast_obj.clientY - touchFirst_obj.startY;
currentTranslateY = +startTranslateY + +moveY; //第一张往上、和最后一张往下 return；
if((startTranslateY ==0 && moveY > 0) || (startTranslateY == -window.innerHeight * (page_count-1) && moveY < 0)) {
return;
}
$(this).css('-webkit-transform', 'translateY('+ currentTranslateY +'px) translateZ(0)'); }); $(document).on('touchend', '.slide_div', function (e) {
// touchEnd_obj = e.changedTouches[0];
$(this).addClass('transition_fast');
//上 或 下
if(moveY > slide_range) {
//第一页的话 不作处理
if(cur_page == 0) return;
cur_page--;
} else if(moveY < -slide_range) {
//最后一页的话 return
if(cur_page == +page_count-1) return;
cur_page++;
} $(this).css('-webkit-transform', 'translateY('+ (-100 * (+cur_page)/4) +'%) translateZ(0)');
});
});
好了大致就是这样3个demo，括号里的都是我的废话可以忽视，上github地址（github处女项目哦）：https://github.com/skyweaver213/slide
谢谢围观，说得不对的地方欢迎吐槽， ^ ^。
微信里经常看到的滑动翻页效果，slide的更多相关文章
- ViewPager实现滑动翻页效果
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...
- 基于vue实现上下滑动翻页效果
18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...
- 桌面浏览器实现滑动翻页效果(Swiper)
还是那个号称很炫的B/S展示软件,在液晶屏上展示需要有滑动翻页的效果(在同一页面滑动切换内容,不是切换页面),最后确定使用功能很强大的Swiper类库. 具体优点可参考:http://www.chin ...
- vue案例 - vue-awesome-swiper实现h5滑动翻页效果
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...
- 转载 vue-awesome-swiper - 基于vue实现h5滑动翻页效果
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...
- js实现移动端手指左右上下滑动翻页效果
var ele = document.getElementsByClassName("img-box")[0]; var beginX, beginY, endX, endY, s ...
- jquery插件实现上下滑动翻页效果
<!DOCTYPE > <meta charset="utf-8" /> <head> <title>测试jquery</ti ...
- Android学习笔记之滑动翻页（屏幕切换）
如何实现手机上手动滑动翻页效果呢?呵呵,在这里我们就给你们介绍一下吧. 一般实现这个特效会用到一个控件:ViewFlipper <1>View切换的控件—ViewFlipper 这个控件是 ...
- webapp应用--模拟电子书翻页效果
前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...
随机推荐
- 2017.9.20 HTML学习总结----下拉列表标签
接上: 1.下拉列表框<option>,<selcct> (1)解释:在表单中,通过option select标记可设计一个下拉式的列表或带有滚动条的列表, 用户可以在列表中选 ...
- node.js 练习2 (调用函数)
1. 调用本地 函数 (1) 创建 n2-1.js ,并输入代码 (2) 运行localhhost:8000 (3)在浏览器中 查看 (4)在cmd中查看 2.调用外部 函数 (1) 创建n2-2. ...
- c#转载的
C#做项目时的一些经验分享 1.对于公用的类型定义,要单独抽取出来,放到单独的DLL中. 2.通过大量定义interface接口,来提高模块化程度,不同功能之间通过实现接口来面向接口编程. 3.如果项 ...
- P1069 细胞分裂
P1069 细胞分裂 考虑质因数分解 先将m1,质因数分解后再根据数学定理将所有质数的质数全乘m2 然后将输入的数据相同处理,再判断 顺便说一下判断规矩 1肯定不行 如果分解后有没有m1质因数分解中的 ...
- Linux利用i节点删除乱码文件
Linux删除乱码文件 当文件名为乱码的时候,无法通过键盘输入文件名,所以在终端下就不能直接利用rm,mv等命令管理文件了. 但是我们知道每个文件都有一个i节点号,我们可以考虑通过i节点号来管理文件. ...
- 初尝微信小程序2-基本框架
基本框架: .wxml :页面骨架 .wxss :页面样式 .js :页面逻辑 描述一些行为 .json :页面配置 创建一个小程序之后,app.js,app.json,app.wxss是必须的 ...
- java后台导出pdf
新页面打开wpf @RequestMapping("/showPdf") public String getpic( HttpServletRequest request, Htt ...
- Linux添加新硬盘，设置分区和开机自动挂载之图文教程！
虚拟机添加硬盘的步骤就不多废话了,主要列出添加硬盘后要进行设置的几个详细步骤: 1.查看磁盘信息:fdisk -ls 添加前如下图所示: 添加后如下图: 也可以用:ls /dev/sd*查看,如下图: ...
- 解题：在下面画线的地方填任何代码,使得最终输出 'hello world',至少写五个不同思路的方案
今天(已经好些天前了...),群里面(JS前端开发跳板6群[81501322])有个群友问了这样一个问题. 如题:在下面画线的地方填任何代码,使得最终输出 'hello world',至少写五个不同思 ...
- 基于Ceph分布式集群实现docker跨主机共享数据卷
上篇文章介绍了如何使用docker部署Ceph分布式存储集群,本篇在此基础之上,介绍如何基于Ceph分布式存储集群实现docker跨主机共享数据卷. 1.环境准备 在原来的环境基础之上,新增一台cen ...