微信里经常看到的滑动翻页效果，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程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...
随机推荐
- phpStudy-FTP_Server插件安装使用教程
FileZilla Server使用教程 ftp server安装教程 除了phpStudy for IIS外其他版本phpStudy不再集成ftp server外. phpStudy for IIS ...
- [转载]开启debug调试模式
debug+trace模式可以查看开发过程中TP的错误信息,可以更好地帮助开发者debug.但是debug模式的开启还不是简单的在配置文件中中设置就可以的,经过查资料摸索,找到一种有效的方法. 首先在 ...
- 将TIMESTAMP类型的差值转化为秒的方法
两个TIMESTAMP之差得到的是INTERVAL类型,而有时我们只需要得到两个时间相差的秒数,如果变成INTERVAL之后,想要获取这个值会非常麻烦. 比较常见的方法是使用EXTRACT来抽取获得的 ...
- [Python]面向对象近期笔记-super
Python面向对象高级 直接调用父类方法 class A: def __init__(self): print("hello") class B(A): def __init__ ...
- 【转】如何手动添加Android Dependencies包
在ADT16 之前可以在工程里面做关联,eclipse会在工程上自动添加ReferenceLibrary.新版本的ADT修改了第三方jar的导入方式,只需要在工程目录下新建libs文件夹,注意是lib ...
- Could not autowire. No beans of 'TbAssetsMapper' type found. less... (Ctrl+F1) Inspection info:Checks autowiring problems in a bean class.
报错:Could not autowire. No beans of 'TbAssetsMapper' type found. less... (Ctrl+F1) Inspection info:Ch ...
- mysql数值函数
abs(x) -- 绝对值 abs(-10.9) = 10 format(x, d) -- 格式化千分位数值 format(1234567.456, 2) = 1,234,567.46 ceil(x) ...
- void和void*指针的一些理解
void 和 void* 指针分别表示无类型和无类型指针. void 的作用是限制: 1,函数无返回值. 2,函数无参数. 当函数的返还值无参数的时候一定要加上 void ,因为在缺省的状态下函数的返 ...
- JavaEE权限管理系统的搭建(三)--------springmvc和mabatis整合环境搭建
本节介绍如何环境的搭建和配置: 首先要在父工程引入jar包依赖: <!-- 通过属性定义指定jar的版本 --> <properties> <spring.version ...
- 9、SpringBoot+Mybatis整合------动态sql
开发工具:STS 前言: mybatis框架中最具特色的便是sql语句中的自定义,而动态sql的使用又使整个框架更加灵活. 动态sql中的语法: where标签 if标签 trim标签 set标签 s ...