swipe的基础使用(二十六)
来源:互联网 发布:靠谱的网络兼职 编辑:程序博客网 时间:2024/05/22 09:04
本次内容我们介绍swiper当中的视差效果。首先我们按照流程先要创建好swiper的基础页面构成。
<div class="swiper-container"> <div class="parallax-bg" style="background-image:url(4.jpg)" data-swiper-parallax="-23%"></div> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="title" data-swiper-parallax="-100">H5EDU 1</div> <div data-swiper-parallax="-300"><img src="logo.png"></div> </div> <div class="swiper-slide"> <div class="title" data-swiper-parallax="-100">H5EDU 2</div> <div data-swiper-parallax="-300"><img src="logo.png"></div> </div> <div class="swiper-slide"> <div class="title" data-swiper-parallax="-100">H5EDU 3</div> <div data-swiper-parallax="-300"><img src="logo.png"></div> </div> </div> <div class="swiper-pagination"></div> </div>
这当中我们添加了背景图片层,单独存放背景图片,并且设定每次滑动的距离和方向,即
<div class="parallax-bg" style="background-image:url(4.jpg)" data-swiper-parallax="-23%"></div>data-swiper-parallax="-23%"即使移动的方向和距离,每次翻页向左移动23%。
还添加了页面内容的每次移动距离。
<div class="title" data-swiper-parallax="-100">H5EDU 1</div> <div data-swiper-parallax="-300"><img src="logo.png"></div>定义了标题每次移动的距离 和内容每次移动的距离。
然后要在js当中进行页面的初始化
var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', paginationClickable:true, parallax:true, speed:600 });
将parallax设置为true开启视差模式。
这样就可以实现炫酷的视差效果了
0 0
- swipe的基础使用(二十六)
- swipe的基础使用(二十三)
- swipe的基础使用(二十四)
- swipe的基础使用(二十五)
- swipe的基础使用(二十七)
- swiper的基础使用(十六)
- swiper的基础使用(十六)
- swiper的基础使用(十六)
- 十六.Java基础加强(二)
- Swift基础(二十六)UIWebView
- Java学习笔记(二十六):String.split()的使用
- java并发编程(二十六)----ThreadLocal的使用
- 二十六,iOS UIWindow的简单使用
- (二十六)svn的问题二
- javascript基础(DOM查询)(二十六)
- java基础篇(十六)——异常(二)
- Java基础之(二十六)对象与垃圾回收
- <Android 基础(二十六)> 渐变色圆角Button
- 使用百度地图报错:Authentication Error errorcode: 230 uid: -1 appid -1 msg: APP Scode码校验失败
- python之TypeError: this constructor takes no arguments
- Bluetooth-->蓝牙开发之状态判断
- 杭电-2191 悼念512汶川大地震遇难同胞——珍惜现在,感恩生活(多重背包)
- UVa 10817 不会子集的二进制表示法
- swipe的基础使用(二十六)
- QT 基本图形绘制
- mysql ALTER 语句的使用
- POJ3045-Cow Acrobats
- javaweb学习总结(五)——Servlet开发(一)
- PHP如何随机生成一个唯一的id
- 分布式事务处理方案
- java代码读取excel文件,同时兼容2003和2007
- 链接