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是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...
随机推荐
- CentOS双网卡双IP设置
CentOS双网卡双IP设置 系统环境:CentOS Linux 网络环境: 两个IP地址,192.168.0.10和10.10.30.2,掩码是255.255.255.0,这两个子网的网关地址分别是 ...
- Python3 Scrapy + Selenium + 阿布云爬取拉钩网学习笔记
1 需求分析 想要一个能爬取拉钩网职位详情页的爬虫,来获取详情页内的公司名称.职位名称.薪资待遇.学历要求.岗位需求等信息.该爬虫能够通过配置搜索职位关键字和搜索城市来爬取不同城市的不同职位详情信息, ...
- 数据库MySQL之 视图、触发器、存储过程、函数、事务、数据库锁、数据库备份、事件
数据库MySQL之 视图.触发器.存储过程.函数.事务.数据库锁.数据库备份.事件 浏览目录 视图 触发器 存储过程 函数 事务 数据库锁 数据库备份 事件 一.视图 1.视图概念 视图是一个虚拟表, ...
- Nhibernate HQL 匿名类（严格说是map的使用以及构造函数的使用
1.map的使用 var hql=string.Format(@"select new map( tc.LimitIndexType as LimitIndexType, tc.LimitS ...
- Java 线程的通讯--生产者和消费者
package 生产者和消费者; //消费者 public class Customer implements Runnable { private Share_resources rescource ...
- 设计模式06： Adapter 适配器模式（结构型模式）
Adapter 适配器模式(结构型模式) 适配(转换)的概念无处不在:电源转接头.电源适配器.水管转接头... 动机(Motivation)在软件系统中,由于应用环境的变化,常常需要将“一些现存的对象 ...
- 平方十位数——第八届蓝桥杯JavaB组（国赛）第一题
原创 标题:平方十位数 由0~9这10个数字不重复.不遗漏,可以组成很多10位数字.这其中也有很多恰好是平方数(是某个数的平方). 比如:1026753849,就是其中最小的一个平方数. 请你找出其中 ...
- 手机打车APP的机遇与挑战
所谓打车APP,就是个能安装在手机上的打车软件.原理是通过GPS进行定位,能够搜索附近的空车信息然后反馈给用户.同样的,空车信息也会反馈给用户.一般这种啊APP都是跟地图类软件一起的.比如百度地图,谷 ...
- 替归算法获取Treeview所有节点
treeview.nodes是获取下一级所有子节点,但是如果是多层的话,就不能,想个法子来获取所有的节点(含节点的子节点),想了想 还是替归算法比较方便,如是有了下面的代码 public static ...
- Topshelf + Quartz2.5 创建基于windows服务
1.创建一个定时调度Quartz类 using Quartz; using Quartz.Impl; using System; using System.Collections.Generic; u ...