swiper、fullPage、hammer几种滑动插件对比
1、使用hammer，自己实现滑动垂直切换页面
<!DOCTYPE html>
<html lang="en">
<head>
<title>意礴足型护照</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta name="MobileOptimized" content="360"/>
<style>
*{
padding: 0;
margin: 0;
}
.swiper-container{position:relative;}
.swiper-slide{
width: 100%;
height: 100%;
background: #fff;
position: absolute;
top:0;
left:0;
}
.slide1{
background: pink;
}
.slide2{
background: lightgreen;
}
.slide3{background: dodgerblue}
.slide4{background:mediumpurple}
.slide5{background:darkorange}
.slide6{
background: orangered;
}
.font-size{
height: 10%;
box-shadow: 0px 0px 20px 0px #E6E6E6;
}
.font-long{
height: 27%;
margin-top: 1vh;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
box-shadow: 0px 0px 20px 0px #E6E6E6;
}
.font-long-title{
height: 34px;
line-height: 34px;
background-color: rgba(249,249,249,1);
flex: none;
-webkit-flex: none;
}
.foot-scale{
flex: auto;
-webkit-flex: auto;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.font-weight{
height: 28%;
margin-top: 1vh;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
box-shadow: 0px 0px 20px 0px #E6E6E6;
}
.arch-turn{
height: 32%;
margin-top: 1vh;
}
.arch-turn-title{
height: 34px;
line-height: 34px;
background-color: rgba(249,249,249,1);
}
.arch-turn>ul{
width: 100%;
height: 100%;
}
.arch-turn li{
width: 49%;
height: 100%;
float: left;
box-shadow: 0px 0px 20px 0px #E6E6E6;
}
.arch-turn li:first-child{
margin-right: 2%;
}
.arch-turn li>div{
width: 100%;
}
.foot-arch{
width: 100%;
height: 19vh;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin-top: 1vh;
}
.fs-16{
font-size: 16px;
}
.fs-12{
font-size: 12px;
}
.hide{
display: none;
} </style>
</head>
<body>
<!--滑动页面-->
<div class="swiper-container" id="swiperContainer">
<!-- 第一页-->
<div class="swiper-slide slide1" id="slide1" data-name="slide">
<div style="height: 50%;background: white;">1111</div>
</div>
<!-- 第二页-->
<div class="swiper-slide slide2" id="slide2" data-name="slide">
<div style="height: 70%;background: white;">2222</div>
</div> <!-- 第三页-->
<div class="swiper-slide slide3" id="slide3" data-name="slide">
33333
</div>
<!-- 第四页-->
<div class="swiper-slide slide4" id="slide4" data-name="slide">
4444
</div>
<!-- 第五页-->
<div class="swiper-slide slide5" id="slide5" data-name="slide">
55555
</div>
<!-- 第六页 -->
<div class="swiper-slide slide6" id="slide6" data-name="slide">
66666
</div>
</div> <script src="js/jquery.min.js"></script>
<script src="js/hammer.min.js"></script>
<script>
var main= {
height:$(window).height(),
width:$(window).width(),
init:function(){
function fixPagesHeight() {
$('.swiper-slide').css({'height': main.height});
var length = $(".swiper-container>.swiper-slide").length;
$('.swiper-container').css({'height': length*main.height});
}
$(window).on('resize', function() {
fixPagesHeight();
})
fixPagesHeight();
var swiperTotal=$(".swiper-container>.swiper-slide");
var length=swiperTotal.length;
$.each(swiperTotal,function(i,item){
swiperTotal.eq(i).css("z-index",length-i).attr("data-num",i+1);
var dataNum = swiperTotal.eq(i).attr('data-num');
swiperTotal.eq(i).css("top", (dataNum-1) * main.height);
}) function loop(k){
for(var i=0; i< length; i++){
if(k< length+k){
swiperTotal.eq(i).animate({'top': main.height*k+'px'});
k++;
}else{
return false;
} }
}
function setTop(num){
var k = 0;
if(num){
k = 2 - num;
loop(k);
}
}
function setTop2(num){
var k = 0;
if(num){
k = -num;
loop(k);
}
} //为了解决swiper-slide里面很多元素的时候，查找不到swiper-slide的data-num
function getparentele(ele){
if(ele.dataset && ele.dataset.name){
if(ele.dataset.name == 'slide'){
return ele
}else{
return getparentele(ele.parentNode)
}
}else{
return getparentele(ele.parentNode)
} }
//默认行为只支持左右，上下操作还需要额外设置
var element = document.getElementById('swiperContainer');
var hammertime = new Hammer(element); hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL }); hammertime .on('swipedown', function(e){
var num = parseInt(getparentele(e.target).dataset.num);
if(num>1){
setTop(num);
}
}) .on('swipeup', function(e){
var num = parseInt(getparentele(e.target).dataset.num);
if(num<6){
setTop2(num);
}
});
/*
*上述虽然能滑动切换页面，但是会存在一个问题，当快速滑动的时候，会滑动好几个页面。
* swiper滑动就相对稳定。
* fullPage再ios手机上滑动切页，很不稳定。没有swiper稳定
*
* */
}
}
$(window).load(function(){
main.init();
})
</script>
</body>
</html>
上述虽然能滑动切换页面，但是会存在一个问题，当快速滑动的时候，会滑动好几个页面。
2、使用fullPage
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'/>
<meta name="MobileOptimized" content="360"/>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
</head>
<body>
<div id="dowebok">
<div class="section" id="page1" style="background: hotpink;">
1
</div>
<div class="section" id="page2" style="background: pink;">
2
</div>
<div class="section" id="page3" style="background: lightgreen;">
3
</div>
<div class="section" id="page4" style="background: dodgerblue">
4
</div>
<div class="section" id="page5" style="background:mediumpurple">
5
</div>
<div class="section" id="page6" style="background:darkorange">
6
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script type="text/javascript">
$(function(){
$('#dowebok').fullpage({
afterLoad : function (anchorLink, index) { },
onLeave : function (index, direction) {
console.log(index, direction)
}
});
});
</script>
</body>
</html>
fullPage在ios手机上滑动切页，很不稳定。滑动切换的时候，波动比较大
3、swiper
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<link rel="stylesheet" href="css/swiper.min.css">
</head> <body>
<div class="swiper-container" id="swiperContainer">
<div class="swiper-wrapper">
<!-------------slide1----------------->
<section class="swiper-slide" style="background:pink;">
1
</section>
<!---------------slide2-------------->
<section class="swiper-slide" style="background:yellow;">
2
</section>
<!----------------slide3-------------->
<section class="swiper-slide">
3
</section>
<!-------------slide4----------------->
<section class="swiper-slide">
4
</section>
<!-------------slide5----------------->
<section class="swiper-slide">
5
</section>
<!-------------slide6----------------->
<section class="swiper-slide">
6
</section>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction : 'vertical',
on: {
//滑动到最后一个slide触发
reachEnd: function(){
console.log('到了最后一个slide');
},
//判断滑动到了哪一页
slideChangeTransitionEnd: function(){
console.log(this.activeIndex);
if(this.activeIndex == 6){
$('#array').css('display','none');
}else{
$('#array').css('display','block');
}
}
}
})
</script>
</body>
</html>
相比上面两种，swiper在ios上滑动也没有出现晃动的问题，特别的稳定
【注意】
swiper在新版开发者工具上滑动不能切换页面，换成旧版的就可以，比如，
swiper、fullPage、hammer几种滑动插件对比的更多相关文章
- swiper.js 移动端触摸滑动插件
API链接: http://www.swiper.com.cn/api/start/2014/1218/140.html <body> <div class="swiper ...
- 移动端触摸滑动插件Swiper
移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...
- 最好的移动触摸滑动插件：Swiper
最近在使用的一个移动触摸滑动插件Swiper,功能很强大,跟之前的那个swipe.JS相比,同时支持在PC端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现.最近作 ...
- swiper嵌套小demo(移动端触摸滑动插件)
swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 : https://github.com/Clear ...
- 移动端触摸滑动插件Swiper使用指南
Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...
- FullPage.js-基于 jQuery 的插件全屏滚动插件
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...
- 自制 移动端 纯原生 Slider滑动插件
在Google搜关键字“slider”或“swiper”能找到一大堆相关插件,自己造轮子是为了能更好的理解其中的原理. 给这个插件取名为“veSlider”是指“very easy slider”非常 ...
- fullPage教程 -- 整屏滚动效果插件 fullpage详解
1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href=&qu ...
- 20 个非常棒的jQuery内容滑动插件
Wow Slider WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...
随机推荐
- easyui-tabs 页签绑定click事件，动态加载jqgrid
.前台代码 <%-- builed by manage.aspx.cmt [ver:] at // :: --%> <%@ Page Language="C#" ...
- 2012年长春网络赛（hdu命题）
为迎接9月14号hdu命题的长春网络赛 ACM弱校的弱菜,苦逼的在机房(感谢有你)呻吟几声: 1.对于本次网络赛,本校一共6名正式队员,训练靠的是完全的自主学习意识 2.对于网络赛的群殴模式,想竞争现 ...
- Oracle sql语句执行顺序(转)
from: http://blog.csdn.net/lailai186/article/details/12612263 sql语法的分析是从右到左 一.sql语句的执行步骤:1)语法分析,分析语句 ...
- 使用dockerfile-maven-plugin发布docker到私有仓库
要想拥有私有docker仓库,需要安装registry镜像,最新版时2.0,具体可以看文档:https://docs.docker.com/registry/. 1. docker pull regi ...
- 【转】SSH指南
OpenSSH OpenSSH 是 SSH (Secure SHell) 协议的免费开源实现.它用安全.加密的网络连接工具代替了 telnet.ftp. rlogin.rsh 和 rcp 工具.Ope ...
- Thumbnail 图片帮助
public class Thumbnail { private Image srcImage; private string srcFileName; /// <summary> /// ...
- svm的第一个实例
用的数据集是uci机器学习库的数据 ‘iris.data’ from sklearn import svm import csv from sklearn.model_selection import ...
- hibernate的获取session的两方法比较，和通过id获取对象的比较，一级缓存二级缓存
opensession与currentsession的联系与区别 在同一个线程中opensession的session是不一样的,而currentsession获取的session是一样的,这就保证了 ...
- 七月小说网 Python + GraphQL （三）
概述 后台数据库几个基本表基本搭建完毕,看了下Github Develop的V4 Api抛弃了RESTful,采用GraphQL,感觉很有意思,一看文档,竟然有Python的开源实现 Graphene ...
- 利用find同时查找多种类型文件
find . -name "*.c" -o -name "*.cpp" -o -name "*.h" 就可以列出当前目录下面所有的c,cpp ...