web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
其他
简单实用的App样式单页全屏滚动布局jQuery插件
分类:
其他
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
使用AppLikeOnePage.js插件需要在页面中引入jquery和onepage.js文件。 ```html ``` ##### HTML结构 该单页布局的基本HTML结构如下: ```html
section0
section1
section2
section3
section4
section5
section0
section1
section2
section3
section4
section5
``` ##### CSS样式 你i需要为整个布局设置overflow-y: hidden属性来阻止滚动条的出现。 ```html body { margin: 0; padding: 0; overflow-y: hidden; color: #fff; } ``` 然后为每一个分段section设置一个颜色。 ```html .op-section{background-color:#1abc9c;} .second{background-color:#3598db;} .third{background-color:#34495e;} .fourth{background-color:#2ecc71;} .fifth{background-color:#8e44ad;} .last{background-color:#f39c12;} ``` 垂直圆点导航按钮的基本样式如下: ```html #radioWrap{ width:20px; height:180px; position:absolute; right:5%; top:50%; margin-top: -90px;} #radio{width:100%; height:100%; overflow: hidden;} #radio li{ width:20px; height:20px; background-color: rgba(255,255,255, 0.5); text-indent: -10000px; border-radius: 50%; margin-top: 12px; cursor:pointer;} #radio li:first-child{margin-top:0;} ``` radioOn元素是代表当前激活的section的圆点,需要将它设置为绝对定位,并通过margin来调整它们之间的距离。 ```html #radioOn{ width:20px; height:20px; margin-bottom:12px; position: absolute; top:0; left:0; background-color: #fff; border-radius: 50%; } ``` ##### 初始化插件 在页面DOM元素加载完毕之后,可以通过startOnePage()方法来初始化该单页布局插件。 ```html $(document).ready(function(){ startOnePage({ frame: "#view", container: "#frame", sections: ".op-section", radio: "#radio", radioOn: "#radioOn", speed: 500, easing: "swing" }); }); ``` ##### 配置参数 AppLikeOnePage.js插件的可用配置参数有: - frame:整个单页布局的包装容器的选择器。 - container:单页布局的二级包装容器的选择器。 - sections:每个分段的class选择器。 - radio:垂直圆点导航按钮的选择器。 - radioOn:激活状态的圆点按钮的选择器。 - speed:页面滚动的速度,单位毫秒。 - easing:页面滚动的easing效果。
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告