html幻灯片单页,PageSlider
PageSlider
介绍
H5单页应用幻灯片3D转场演示效果
安装教程
下载本项目打开index.html页面运行
使用说明
一、目录介绍
1、css目录:
reset.css:将一些标签的样式属性在各浏览器中统一。
animate.css:动画类库
animations.css:自定义页面转场动画类库
index.css:单页应用的样式
all.css:将以上用到的css文件合并在一起减少浏览器对服务的的请求次数,减轻服务器压力
all.min.css:all.css文件的压缩文件,用于生产环境
all.css.JSCompress:JSCompress合并压缩程序的配置文件
建议自定义样式,放在单独style.css文件里
2、js目录:
zepto.js:类似jQuery库API的移动端DOM操作库。
touch.js:支持移动端触摸的zepto.js插件。
coffee.js:音符漂浮插件
loader.js:加载等待插件
preload.js:图片预加载插件
index.js:单页应用的js
all.js:将以上用到的js文件合并在一起减少浏览器对服务的的请求次数,减轻服务器压力
all.min.js:all.js文件的压缩文件,用于生产环境
3、img目录:img根目录下放系统图片,建议将自己的图片放在img目录下的自定义文件夹下,如img/my
4、media目录:存放媒体资源文件
二、index.html文档说明
1、class="wrap" 顶级容器,包括所有的页面。具有属性:
data-options设置属性,为json格式的字符串,里面包括属性有:
loop:是否翻页循环。布尔类型
indexAnimate:首页是否支持转场动画。布尔类型
loadingAnimate:打开时是否显示加载动画。
pageIndicator:是否添加页面指示器 。布尔类型
upIcon:是否添加向上箭头。布尔类型
preload:设置是否自动预加载图片,默认自动预加载。自动预加载是页面一打开就自动预加载。布尔类型
preLoadPages:预加载图片的页数。数字类型
pageIndicatorColor:指示器颜色值。字符串数组类型。如['#99FF33','#CC0033','#99FFCC','#999933','#9966CC','#9999FF']
2、page页面:在class="wrap"标签下添加page页面,每个页面用类.page标识,如class="page page-1",
page序号用类名称表示,序号从1递增,如page-2、page-3,每个页面必须有类标识。具有属性:
属性data-animation:指定当前页面应用的动画类型,数字。可以打开testAnimate.html页面查看页面转场效果,并选择动画类型,记住是数字。
3、slide页面:幻灯片页面,每个页面下可以有多个幻灯片页面。在class="page"标签下添加slide页面,每个页面用类.slide标识,
如class="slide page-1-1"。幻灯片序号用类名称表示,序号从1递增,如page-1-1、page-1-2、page-2-1等。表示第几页下的第几个幻灯片。有属性:
属性data-animation:指定当前页面应用的动画类型,数字
4、class="img-up" 翻页指示箭头。位置不能变动。
5、页面图片预加载。预加载的图片只能放在.page标签下或子孙标签下。
a、img标签图片预加载,将真实的图片路径放在img标签的data-src属性里。如:
。
b、html标签的背景图片预加载,将真实的图片路径放在html标签的data-src属性里,并给html标签添加.preload-bg类名称。如:
。
6、右键菜单功能:在页面单击右键,弹出动画效果选择菜单,选择动画效果,翻下一页的时候,应用选择的动画
三、系统定义css样式类
1、.show:显示;.hide:隐藏;
2、.page-center:页面居中(水平居中垂直居中);.center:水平居中;.vertical:垂直居中;
3、.rotate360:360度不停旋转
4、.page .slide-indicator li:更改页面幻灯片背景颜色。.page .slide-indicator li.on:更改幻灯片当前活动背景颜色
5、可以应用animations.css、animate.css两个文件里面的动画效果类样式。
四、PageSlider对象属性及方法
1、preLoadImg()方法:手动设置预加载图片。一般用于preload自动预加载设置为false时触发,预加载。比如通过ajax去取图片。只有在ajax取图片成功时才能去加载图片
五、参考资料
16、8个前沿的 HTML5 & CSS3 效果【附源码下载】:http://www.yyyweb.com/377.html
六、版本更新
1、1.0.1 2018-10-30更新右键菜单选择动画效果功能;增加了magic.css动画类库
1、1.0.2 2019-6-1增加了preLoadImg()预加载图片方法
参与贡献
Fork 本仓库
新建 Feat_xxx 分支
提交代码
新建 Pull Request
html幻灯片单页,PageSlider相关推荐
- 仿迅雷官网html模板,jquery css3 animation属性仿迅雷登录页面带幻灯片单页模板
样式仿迅雷的,重新手写清爽代码 资源下载此资源下载价格为4D币,请先登录 资源文件列表 codedown123-0814-35/images/all.css , 29088 codedown123-0 ...
- 使用Vanilla.js构建单页应用程序(SPA)网站
目录 项目 带有模块的组织代码 以可观察的方式应对变化 支持声明式数据绑定 将幻灯片(Slides)托管和加载为"页面" 使用路由器处理导航 带有CSS3动画的转换时间线 管理&q ...
- 建立屡获殊荣的单页网站的5个核心要素
This sponsored article was created by our content partner, BAW Media. Thank you for supporting the p ...
- 基于html5海贼王单页视差滚动特效
分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="top"><d ...
- 15个新鲜的单页网站设计实例
单页网站因为结合着css3 html5和jquery技术 使得这样的网站看这些网站看起来更具吸引力和新鲜的感,逐渐成为互联网上一个新趋势 ,今天介绍网站设计一些新鲜的例子 .我希望大家将欣赏这美妙的设 ...
- 为什么使用单页应用_为什么我讨厌您的单页应用
为什么使用单页应用 by Stefan Tilkov 斯蒂芬·蒂尔科夫(Stefan Tilkov) 为什么我讨厌您的单页应用 (Why I hate your Single Page App) Ok ...
- 基于Vue, Vuex 和 ElementUI 构建轻量单页Hexo主题Lite
Hexo Theme Lite Keep Calm, Lite and Writing. light single page blog application theme, using Vue, Vu ...
- 如何在单页应用程序Angular 7中使用FastReport Core Web报表
2019独角兽企业重金招聘Python工程师标准>>> 下载FastReport.Net最新版本 单页应用程序的概念正在寻找越来越多的支持者.最着名的单页框架之一是Angular,它 ...
- flask 检测post是否为空_用Flask和Vue制作一个单页应用(五)
使用POST向后台发送数据 Flask app修改 可以直接使用现有的路由处理函数来接收前端发来的数据,server/app.py中的all_res()修改如下: @app.route('/resou ...
最新文章
- DDoS攻击已成掩盖真实网络攻击的烟雾弹
- 电商系统如何做搜索引擎?
- 安卓APP动态调试技术
- boost::hana::accessors用法的测试程序
- 小程序素材抓取软件_如何抓取微信小程序的数据?
- ubuntu100%快速安装搜狗输入法
- get和post 两种基本请求方式的区别
- java怎么实现打牌_JAVA入门第三季实战:简易扑克牌
- php项目webpack打包,利用node.js对webpack打包
- FTPClient使用中的问题--获取当前工作目录为null
- Python入门经典题斐波那契数列
- Gauss-Newton法matlab求解
- 为知笔记——使用第三方Markdown的Typora编辑器编辑为知笔记
- python可以剪辑视频吗_你知道吗?Python也可以剪辑视频!
- 阿里云国际站-阿里云在其云峰会上推出新的直播电子商务解决方案
- 用Node.js实现一个HTTP服务器程序(文件服务器)
- python基_python之地基(一)
- 梁宇轩 mysql 语句学习一 对表的操作
- 第二章:Djgo后台管理
- Linux中定位JAVAHOME
热门文章
- windows10+tensorflow-gpu2.0.0安装教程
- 美国人初学Python之五
- 计算机验证局域网,局域网实现802.1X认证具体操作步骤
- 无线接入认证web服务器搭建,基于WEB和RADIUS的无线局域网接入认证系统
- git pull出现Abort
- JS控制 textarea多行文本框HTML标签根据内容自适应高度
- python win32转pdf 横版_Python调用Win32com实现批量Office转PDF
- python 绘图-不同的中文字体汇总
- 图像水波纹特效原理分析和实现
- lte接口流程图_一种LTE系统内部X2接口切换流程和Uu接口信令流程的关联方法