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是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...
随机推荐
- C++ 重载操作符- 01 简单的入门
重载操作符的定义 这篇博客是对 重载操作符 的一个概要性的介绍. 重载操作符是C++语言的高级功能,当我们写一个类的时候,可以根据需要学一个重载操作符,如果 不需要,我们可以不写. 大量的操作符都可以 ...
- asp.net web 自定义控件
0.调用代码 protected override void Page_Load(object sender, EventArgs e) { //给基类服务接口复制,可不付 if (IsPostBac ...
- ESP8266-iot-2
1.SDK概述 复制相关的工程文件到HelloWorld里面 要在版本esp8266_nonos_sdk_v2.0.0_16_07_19上面开发,那么就要复制相应文件 然后打开IDE 导入HelloW ...
- MVC全局用户验证之HttpModule
在请求进入到MVC的处理mcvHandler之前,请求先到达HttpModule,因此可以利用HttpModule做全局的用户验证. HttpModule MVC5之前的版本基于system.web. ...
- Examining Application Startup in ASP.NET 5
By Steve Smith June 23, 2015 ASP.NET 5 differs from previous versions of ASP.NET in many ways. Gone ...
- poj1860 Currency Exchange(spfa判断正环)
Description Several currency exchange points are working in our city. Let us suppose that each point ...
- POJ - 2965 The Pilots Brothers' refrigerator(压位+bfs)
The game “The Pilots Brothers: following the stripy elephant” has a quest where a player needs to op ...
- XE改变图标颜色
放一个image,load 一张png/..图片 再放一个FillRGBEffect, 将此控价拖到image下 改变FillRGBEffect的Color,就改变了image图标上的颜色. 原图为黑 ...
- 【转】ANDROID自定义视图——onMeasure，MeasureSpec源码 流程 思路详解
原文地址:http://blog.csdn.net/a396901990/article/details/36475213 简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量—— ...
- DataType--时间类型
SQL SERVER 存储时间的方式和存放浮点数的方式类似,存放时按照一定公式算出一个数值,存放到页面,在读取时按照公式求算出时间值,再按照默认或指定的时间格式展示给用户. 如果存放DATETIME数 ...