移动端滑动效果 swiper 4.0.7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>每日优鲜</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="css/swiper.min.css">
<!-- <link rel="stylesheet" href="css/style.css"> -->
<style type="text/css">
html,body {
position:relative;
height:100%;
}
html {
overflow:hidden;
}
* {
padding:0;
margin:0;
}
li {
list-style:none;
}
body {
background:#fff;
font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
font-size:12px;
}
.img img {
width:100%;
display:block;
}
#top {
position:absolute;
top:0;
z-index:5;
width:100%;
background:#fff;
}
#top .addr {
height:36px;
margin:0 auto;
display:block;
}
#top .search {
position:absolute;
top:0;
right:0;
height:36px;
display:block;
}
#nav {
border-bottom:1px solid #ebebeb;
}
#nav .swiper-slide span {
margin:0 5px;
text-align:center;
display:block;
line-height:2.5;
font-size:14px;
color:#333333;
}
#nav .bar {
width:50px;
height:3px;
position:absolute;
bottom:0px;
}
#nav .bar .color {
width:36px;
margin:0 auto;
height:3px;
background:#ff4891;
}
.banner img {
width:100%;
display:block;
}
.banner .swiper-pagination {
left:auto;
right:7px;
bottom:7px;
width:auto;
padding:2px 7px;
border-radius:10px;
color:#fff;
background:rgba(0,0,0,.3);
}
#page {
margin-bottom:50px;
height:100%;
}
#page .slidepage {
height:100%;
}
.scroll {
height:100%;
}
.slidescroll {
height:auto;
}
#footer {
position:fixed;
bottom:0;
z-index:5;
}
</style>
</head>
<body>
<div id="top">
<img src="data:images/top.png" class="addr">
<img src="data:images/search.png" class="search">
<div class="swiper-container" id="nav">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span style="color:rgba(255,72,145,1);">热卖</span></div>
<div class="swiper-slide">
<span>水果</span></div>
<div class="swiper-slide">
<span>乳品</span></div>
<div class="swiper-slide">
<span>零食</span></div>
<div class="swiper-slide">
<span>肉蛋</span></div>
<div class="swiper-slide">
<span>蔬菜</span></div>
<div class="swiper-slide">
<span>酒饮</span></div>
<div class="swiper-slide">
<span>速食</span></div>
<div class="swiper-slide">
<span>熟食</span></div>
<div class="swiper-slide">
<span>水产</span></div>
<div class="swiper-slide">
<span>粮油</span></div>
<div class="swiper-slide">
<span>轻食</span></div>
<div class="swiper-slide">
<span>火锅</span></div>
<div class="swiper-slide">
<span>日百</span></div>
<div class="bar">
<div class="color"></div>
</div>
</div>
</div>
</div>
<div class="swiper-container" id="page">
<div class="swiper-wrapper">
<!-- 一 -->
<div class="swiper-slide slidepage">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide slidescroll">
<!-- 热卖 -->
<div class="swiper-container banner">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="uploads/banner1.jpg"></div>
<div class="swiper-slide">
<img src="uploads/banner2.jpg"></div>
<div class="swiper-slide">
<img src="uploads/banner3.jpg"></div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="img">
<img src="data:images/index1.png">
<img src="data:images/hot.png">
</div>
<ul class="img">
<li>
<img src="uploads/product1.png"></li>
<li>
<img src="uploads/product2.png"></li>
<li>
<img src="uploads/product3.png"></li>
<li>
<img src="uploads/product4.png"></li>
<li>
<img src="uploads/product5.png"></li>
<li>
<img src="uploads/product3.png"></li>
<li>
<img src="uploads/product4.png"></li>
<li>
<img src="uploads/product5.png"></li>
<li>
<img src="uploads/product3.png"></li>
<li>
<img src="uploads/product4.png"></li>
<li>
<img src="uploads/product5.png"></li>
<li>
<img src="uploads/product3.png"></li>
<li>
<img src="uploads/product4.png"></li>
<li>
<img src="uploads/product5.png"></li>
</ul>
<div class="img">
<img src="data:images/bottom.png">
</div>
</div>
</div>
</div>
</div>
<!-- 二 -->
<div class="swiper-slide slidepage">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide slidescroll">
<div class="swiper-container banner">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="uploads/banner1.jpg"></div>
<div class="swiper-slide">
<img src="uploads/banner2.jpg"></div>
<div class="swiper-slide">
<img src="uploads/banner3.jpg"></div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="img">
<img src="data:images/hot.png"></div>
<ul class="img">
<li>
<img src="uploads/product1.png"></li>
<li>
<img src="uploads/product2.png"></li>
<li>
<img src="uploads/product3.png"></li>
<li>
<img src="uploads/product4.png"></li>
<li>
<img src="uploads/product5.png"></li>
<li>
<img src="uploads/product3.png"></li>
<li>
<img src="uploads/product4.png"></li>
<li>
<img src="uploads/product5.png"></li>
<li>
<img src="uploads/product3.png"></li>
<li>
<img src="uploads/product4.png"></li>
<li>
<img src="uploads/product5.png"></li>
<li>
<img src="uploads/product3.png"></li>
<li>
<img src="uploads/product4.png"></li>
<li>
<img src="uploads/product5.png"></li>
</ul>
<div class="img">
<img src="data:images/bottom.png"></div>
</div>
</div>
</div>
</div>
<div class="swiper-slide slidepage">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide slidescroll">slide3</div></div>
</div>
</div>
<div class="swiper-slide slidepage">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide slidescroll">slide4</div></div>
</div>
</div>
<div class="swiper-slide slidepage">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide slidescroll">slide5</div></div>
</div>
</div>
<div class="swiper-slide slidepage">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide slidescroll">slide6</div></div>
</div>
</div>
<div class="swiper-slide slidepage">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide slidescroll">slide7</div></div>
</div>
</div>
<div class="swiper-slide slidepage">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide slidescroll">slide8</div></div>
</div>
</div>
<div class="swiper-slide slidepage">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide slidescroll">slide9</div></div>
</div>
</div>
<div class="swiper-slide slidepage">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide slidescroll">slide10</div></div>
</div>
</div>
<div class="swiper-slide slidepage">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide slidescroll">slide11</div></div>
</div>
</div>
<div class="swiper-slide slidepage">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide slidescroll">slide12</div>
</div>
</div>
</div>
<div class="swiper-slide slidepage">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide slidescroll">slide13</div>
</div>
</div>
</div>
<div class="swiper-slide slidepage">
<div class="swiper-container scroll">
<div class="swiper-wrapper">
<div class="swiper-slide slidescroll">slide14</div>
</div>
</div>
</div>
</div>
</div>
<div class="img" id="footer"><img src="data:images/footer.png"></div>
<script src="js/swiper.min.js"></script>
<script>
//暂时设计每个slide大小需要一致
barwidth = 36 //导航粉色条的长度px
tSpeed = 300 //切换速度300ms
var navSwiper = new Swiper('#nav', {
slidesPerView: 6,
freeMode: true,
on: {
init: function() {
navSlideWidth = this.slides.eq(0).css('width'); //导航字数需要统一,每个导航宽度一致
bar = this.$el.find('.bar')
bar.css('width', navSlideWidth)
bar.transition(tSpeed)
navSum = this.slides[this.slides.length - 1].offsetLeft //最后一个slide的位置
clientWidth = parseInt(this.$wrapperEl.css('width')) //Nav的可视宽度
navWidth = 0
for (i = 0; i < this.slides.length; i++) {
navWidth += parseInt(this.slides.eq(i).css('width'))
}
topBar = this.$el.parents('body').find('#top') //页头
},
},
});
var pageSwiper = new Swiper('#page', {
watchSlidesProgress: true,
resistanceRatio: 0,
on: {
//左右拖动内容页
touchMove: function() {
progress = this.progress
bar.transition(0)
bar.transform('translateX(' + navSum * progress + 'px)')
//粉色255,72,145灰色51,51,51
for (i = 0; i < this.slides.length; i++) {
slideProgress = this.slides[i].progress
if (Math.abs(slideProgress) < 1) {
r = Math.floor((255 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
g = Math.floor((72 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
b = Math.floor((145 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
navSwiper.slides.eq(i).find('span').css('color', 'rgba(' + r + ',' + g + ',' + b + ',1)')
}
}
},
transitionStart: function() {
//内容页id
activeIndex = this.activeIndex
console.log(activeIndex);
activeSlidePosition = navSwiper.slides[activeIndex].offsetLeft
//释放时导航粉色条移动过渡
bar.transition(tSpeed)
bar.transform('translateX(' + activeSlidePosition + 'px)')
//释放时文字变色过渡
navSwiper.slides.eq(activeIndex).find('span').transition(tSpeed)
navSwiper.slides.eq(activeIndex).find('span').css('color', 'rgba(255,72,145,1)')
if (activeIndex > 0) {
navSwiper.slides.eq(activeIndex - 1).find('span').transition(tSpeed)
navSwiper.slides.eq(activeIndex - 1).find('span').css('color', 'rgba(51,51,51,1)')
}
if (activeIndex < this.slides.length) {
navSwiper.slides.eq(activeIndex + 1).find('span').transition(tSpeed)
navSwiper.slides.eq(activeIndex + 1).find('span').css('color', 'rgba(51,51,51,1)')
}
//导航居中
navActiveSlideLeft = navSwiper.slides[activeIndex].offsetLeft //activeSlide距左边的距离
navSwiper.setTransition(tSpeed)
if (navActiveSlideLeft < (clientWidth - parseInt(navSlideWidth)) / 2) {
navSwiper.setTranslate(0)
} else if (navActiveSlideLeft > navWidth - (parseInt(navSlideWidth) + clientWidth) / 2) {
navSwiper.setTranslate(clientWidth - navWidth)
} else {
navSwiper.setTranslate((clientWidth - parseInt(navSlideWidth)) / 2 - navActiveSlideLeft)
}
},
}
});
navSwiper.$el.on('touchstart', function(e) {
e.preventDefault() //去掉按压阴影
})
//点击nav 标题
navSwiper.on('tap', function(e) {
clickIndex = this.clickedIndex
clickSlide = this.slides.eq(clickIndex)
pageSwiper.slideTo(clickIndex, 0);
this.slides.find('span').css('color', 'rgba(51,51,51,1)');
clickSlide.find('span').css('color', 'rgba(255,72,145,1)');
})
//内容上下滚动
var scrollSwiper = new Swiper('.scroll', {
//65是头部的高
//36是top地址和搜索的高
slidesOffsetBefore: 72,
direction: 'vertical',
freeMode: true,
slidesPerView: 'auto',
/*mousewheel: {
releaseOnEdges: true,
},
on: {
//上下滑动
touchMove: function() {
if (this.translate > 72 - 36 && this.translate < 72) {
topBar.transform('translateY(' + (this.translate - 72) + 'px)');
}
},
//开始滑动
touchStart: function() {
startPosition = this.translate
//上下的位置
console.log(startPosition);
},
//滑动成功后的
touchEnd: function() {
topBar.transition(tSpeed)
console.log(topBar);
if (this.translate > 36 && this.translate < 72 && this.translate < startPosition) {
topBar.transform('translateY(-36px)');
for (sc = 0; sc < scrollSwiper.length; sc++) {
if (scrollSwiper[sc].translate > 36) {
scrollSwiper[sc].setTransition(tSpeed);
scrollSwiper[sc].setTranslate(36)
}
}
}
if (this.translate > 36 && this.translate < 72 && this.translate > startPosition) {
topBar.transform('translateY(0px)');
for (sc = 0; sc < scrollSwiper.length; sc++) {
if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
scrollSwiper[sc].setTransition(tSpeed);
scrollSwiper[sc].setTranslate(72)
}
}
}
},
transitionStart: function() {
topBar.transition(tSpeed)
if (this.translate < 72 - 36) {
topBar.transform('translateY(-36px)');
if (scrollSwiper) {
for (sc = 0; sc < scrollSwiper.length; sc++) {
if (scrollSwiper[sc].translate > 36) {
scrollSwiper[sc].setTransition(tSpeed);
scrollSwiper[sc].setTranslate(36)
}
}
}
} else {
topBar.transform('translateY(0px)');
if (scrollSwiper) {
for (sc = 0; sc < scrollSwiper.length; sc++) {
if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
scrollSwiper[sc].setTransition(tSpeed);
scrollSwiper[sc].setTranslate(72)
}
}
}
}
},
}*/
})
//热卖
var bannerSwiper = new Swiper('.banner', {
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
renderFraction: function(currentClass, totalClass) {
return '<span class="' + currentClass + '"></span>' + '/' + '<span class="' + totalClass + '"></span>';
},
},
});
</script>
</body>
</html>
移动端滑动效果 swiper 4.0.7的更多相关文章
- swiper在微信端滑动效果不友好（滑动不了）的解决方案
如需转载请注明出处.好用就点赞吧 前提:我做的事竖直方向的一份报告,上下翻页滑动. 猜测原因: 1.检查自己的slide里面内容的样式的的高度,就是两个页面的高度不一致,测试的时候wrapper会取连 ...
- js移动端滑动效果
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- 移动端触摸滑动插件Swiper
移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...
- 移动端如何用swiper实现导航栏效果
在移动端如何用swiper实现导航栏效果 我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官 ...
- 移动端touch触摸事件（滑动效果和手势操作）
一.定义 ①touch是移动端的触摸事件,而且是一组事件,主要有以下事件: touchstart 事件:当手指触摸屏幕的时候触发 touchmove 事件:当手指在屏幕来回滑动的时候触发 touche ...
- Axure8 实现移动端页面上下滑动效果
目前,很多Axure新人都在问如何实现界面上下滑动效果,网上相关的教程也不少,各有各的方法,但是很少有教程对滑动界限设置做出比较详细的说明,其实在工作过程中,个人发现练好Axure是很有意提升逼格的, ...
- 原生JavaScript+CSS3实现移动端滑块效果
在做web页面时,无论PC端还是移动端,我们会遇到滑块这样的效果,可能我们往往会想着去网上找插件,其实这个效果非常的简单,插件代码的的代码往往过于臃肿,不如自己动手,自给自足.首先看一下效果图: 分析 ...
- Android Scroll分析——滑动效果产生
相对于在Android2.x版本上出现的长按.点击事件的效果,不得不说,滑动操作具有更好的用户体验.因此,从Android 4.X版本开始,出现了更多滑动操作的效果.越来越多第三方应用模仿这样的效果, ...
- jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- MAC OS进阶必看——这10个技巧让你秒变MAC达人
文章内容及图片来源于:什么值得买,如果涉及版权问题,请联系作者删除 文章收录于:风云社区(提供上千款各类mac软件的下载) 使用mac系统也有好几个年头,出色的办公效率以及越来越广的兼容性让mac成为 ...
- nginx缓存设置（expires）
一.expires功能说明 nginx缓存的设置可以提高网站性能,对于网站的图片,尤其是新闻网站,图片一旦发布,改动的可能是非常小的,为了减小对服务器请求的压力,提高用户浏览速度,我们可以通过设置ng ...
- 主机管理+堡垒机系统开发：strace命令用法详解（六）
一.简单介绍 strace是什么? 按照strace官网的描述, strace是一个可用于诊断.调试和教学的Linux用户空间跟踪器.我们用它来监控用户空间进程和内核的交互,比如系统调用.信号传递.进 ...
- [物理学与PDEs]第5章第2节 变形的描述, 应变张量 2.3 位移梯度张量与无穷小应变张量
1. 位移向量 $$\bex {\bf u}={\bf y}-{\bf x}. \eex$$ 2. 位移梯度张量 $$\bex \n_x{\bf u}={\bf F}-{\bf I}. \eex$ ...
- shell使用lftp连接ftp和sftp,并可以指定私钥
lftp连接ftp在脚本中可以 lftp -c "open username:password@host:port; ls /Friso/20180822/click/mobile/SUCC ...
- 新加坡100M带宽,国内延迟70ms,仅800元
▇ 新加坡100M带宽,延迟80msE3_8G_1TB_100M_5IP_800元促:E3_32G_1TB SSD_1200元 ▇ 马来西亚,独享带宽,延迟70msL5630_16G_1TB_15M_ ...
- LeetCode第十题-正则表达式匹配
Regular Expression Matching 问题简介:给定字符串,给定匹配模式,判断字符串是否满足匹配模式 问题详解:一共有两种特殊模式: ‘.’ 匹配任何单个字符 ‘*’ 匹配前面元素的 ...
- html超出显示省略号
<span>装备自动回收,躺的赚钱,收入比上班还要高,古天乐都乐开了花装备自动回收,躺的赚钱,收入比上班还要高,古天乐都乐开了花装备自动回收,躺的赚钱,收入比上班还要高,古天乐都乐开了花& ...
- jenkins备份与恢复【转】
jenkins这里我通过thinbackup插件进行对jenkins的配置备份与恢复 1丶安装thinbackup插件 2丶系统管理选择thinbackup插件 3丶创建备份目录 mkdir /bac ...
- fiddler抓包工具
转载: http://www.cr173.com/html/15341_1.html https://www.cnblogs.com/shihaiming/p/5887654.html 软件简介: 数 ...