[JS插件] pageSwitch 适合移动端整屏滚动效果的使用教程
来源:互联网 发布:冰箱品牌知乎 编辑:程序博客网 时间:2024/05/23 18:31
pageSwitch 是一款可以整屏滚动的js插件,可以设置多种切换效果,手机上也能很好的实现。
代码出处:https://github.com/qiqiboy/pageSwitch
使用说明
一、下载代码
在 https://github.com/qiqiboy/pageSwitch 下载源代码。
二、构建网页,引入相关文件
1、新建html页面,如果是移动端看的话,需要在页面头部插入视口说明:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
2、引入 jquery.js 库文件,引入 pageSwitch.js 文件。
三、写出你要分几屏的html结构,并配上样式
1、在页面里写出你要分几屏的html代码,并把他们都套在一个层内,假设你要分2屏,如下:
<div id="pages"> <div class="page page1 current"> <h1>第一页</h1> <div class="box"> <p>可以用用鼠标或者手指拖动页面,亦可使用鼠标滚轮、键盘方向键等</p> </div> </div> <div class="page page2"> <h1>第二页</h1> <div class="box"> <p>不久前,针对微博用户@Mor-小某的“锤子手机还是不错的!试用后感觉很不错!就是3000多买个它感觉贵了!定价2600的话还能接受!”这句话,罗永浩在微博上表示“明白,我们考虑一下”。但就在大家还没回过神来的时候锤子科技已经迅速宣布了降价,其中16GB 3G版的售价直接下调到了1980元,32G/64G也分别调整到了2080/2480元。</p> </div> </div> </div>
2、为这个结构配上必须的样式,如下:
#pages { position: relative; overflow: hidden; width: 100%; max-width: 768px; height: 100%; margin: 0 auto;}.page { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
四、写入JavaScript启动代码
你可以直接复制官网上的启动代码,也可以修改后使用,这里给出修改过后,使当前层的class加上current的样例:
<script> window.onload=function () { var pw=new pageSwitch('pages',{ duration:800, //int 页面过渡时间 direction:1, //int 页面切换方向,0横向,1纵向 start:0, //int 默认显示页面 loop:false, //bool 是否循环切换 ease:'ease', //string|function 过渡曲线动画,详见下方说明 transition:'slide', //string|function转场方式,详见下方说明 freeze:false, //bool 是否冻结页面 mouse:true, //bool 是否启用鼠标拖拽 mousewheel:true, //bool 是否启用鼠标滚轮切换 arrowkey:true, //bool 是否启用键盘方向切换 autoplay:false //bool 是否自动播放幻灯 新增 }); //以下内容是回调函数,不是必须的 pages=pw.pages; pw.on('before',function(now,prev){//now是切换前当前页面索引 $(pages[now]).removeClass('current'); }); pw.on('after',function(now,prev){//now是切换后当前页面索引 $(pages[now]).addClass('current'); }); }); </script>
0 0
- [JS插件] pageSwitch 适合移动端整屏滚动效果的使用教程
- 适合移动手机使用的js环形菜单特效插件
- [JS插件] fullPage:适合移动端web整屏滚动组件
- 视差滚动效果插件skrollr-scroll使用教程
- 视差滚动效果Stellar.js使用教程(jQuery)
- 10个关于视差滚动效果的教程和插件
- 7款Jquery视差和滚动效果的js插件
- js滚动的效果
- krpano 教程 - 雪花效果插件的使用
- krpano 教程 - 重力效果插件的使用
- iscroll.js移动端滚动插件
- 移动web最简洁的滑动效果Swipe JS(适合初学者)
- 移动web最简洁的滑动效果Swipe JS(适合初学者)
- swiper.js插件实现图片滚动效果
- 移动端的 jquery——移动端滚动条插件iScroll.js API文档
- pageSwitch.js 实现全屏切换
- 移动web滑动效果Swipe JS插件
- [jQuery插件] 移动端整屏滚动的DD Full Screen Slider
- android开发中出现的错误集(不断更新)
- 欢迎使用CSDN-markdown编辑器
- eclipse的快捷键--收藏
- HDU 2120--Ice_cream's world I【并查集, 判断环的个数】
- 《C++编程思想》 第七章 常 量 (原书代码+习题+解答)
- [JS插件] pageSwitch 适合移动端整屏滚动效果的使用教程
- 星云测试--让软件像普通商品一样放心交易
- 约瑟夫环(C++单项循环链表)
- cocos2d-x 切换两个菜单项 不用MenuItemToggle
- iOS绘图教程
- android 动画基础
- AlphaBeta剪枝算法
- centos6.5下postgresql9.4.3安装与配置
- fstream 几种打开文件的方式,方便以后用