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是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...
随机推荐
- Django--登录实例
1.准备工作 创建必要的目录和文件,导入js,css,bootstrap等,目录结构如下: 2.配置文件添加static路径 settings.py 1 2 3 4 STATIC_URL = '/st ...
- Logistic Regression 用于预测马是否生病
1.利用Logistic regression 进行分类的主要思想 根据现有数据对分类边界线建立回归公式,即寻找最佳拟合参数集,然后进行分类. 2.利用梯度下降找出最佳拟合参数 3.代码实现 # -* ...
- css总结16:HTML5 多媒体音频(Audio)视频(video )
1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...
- 为docker设置国内镜像
docker的默认镜像(https://hub.docker.com/)地址,拉取镜像时是比较慢的,经常会超时,有时拉取几个小时.为了加快拉取的时间和速度,需要添加中国的镜像地址: 国内的加速地址: ...
- [raspberry p3] suse wifi驱动加载
问题 raspberry pi3安装后发现wifi 启动不了, brcmf_sdio加载失败了,return error code为-110 处理方法 打开 /etc/dracut.conf.d/ra ...
- perationalError: (2003, "Can't connect to MySQL server on u'192.168.1.6' (timed out)")
在Ubuntu(192.168.1.20)中部署项目后,mysql还在另外一台windows(192.168.1.6)机子上,ping windows时可以ping通,但是访问项目提示: perati ...
- Nexus 私有仓库
Nexus3.6和Nexus2.x安装不同,2.x版本需要安装服务,再启动.而3.6版本则更加简单. 步骤如下: jdk环境:1.8 Nexus3.6解压(注意,路径不要带空格及中文),解压后有两个文 ...
- MVC上的jsonp扩展，解决跨域访问问题
总是有人会遇到跨域问题,然后有个jsonp的解决方案,MVC中代码如下: public class JsonpResult : System.Web.Mvc.JsonResult { object d ...
- C#中如何向数组中动态添加元素
转自:https://blog.csdn.net/qq_35938548/article/details/78325558 背景:现需要向数组中循环插入字符串,但C#中的数组是不支持动态添加元素的,只 ...
- Sql 不确定列 行转列操作
做项目时,用到了汇总统计的行转列,且 表结构: 具体存储过程脚本如下: -- =============================================-- Author: -- C ...