fullPage的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
} .list{
font: 36px/70px "微软雅黑";
text-indent: 1em;
} .list li{
border-bottom: 1px solid #ccc;
} .list .group{
background: pink;
color: #fff;
text-indent: 0.5em;
} .echo{
width: 200px;
height: 200px;
border-radius: 10px;
background: rgba(0,0,0,0.1);
color: #fff;
font: 120px/200px "微软雅黑";
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
text-align: center;
display: none;
} .btn{
position: fixed;
right: 0;
top: 0;
background: rgba(0,0,0,0.1);
font: 22px "微软雅黑";
text-align: center;
padding: 0 10px;
}
</style>
<meta name="viewport" content="width=640, user-scalable=no" />
<body>
<div class="echo">A</div>
<ul class="list">
<li class="group">A</li>
<li>奥迪</li>
<li>奔驰</li>
<li>长安</li>
<li class="group">D</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
<li>010</li>
<li>011</li>
<li>012</li>
<li>013</li>
<li>014</li>
<li>015</li>
<li>016</li>
<li>017</li>
<li>018</li>
<li>019</li>
<li>020</li>
<li>021</li>
<li>022</li>
<li>023</li>
<li>024</li>
<li>025</li>
<li>026</li>
<li>027</li>
<li>028</li>
<li>029</li>
<li>030</li>
</ul> <ul class="btn">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
</ul>
</body>
<script src="js/make_json.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> (function(){ //1.定义一个对象将方法或属性存在里面 var car = { //数据分组方法
group:function(data){ //创建变量保存分组的数据 var result = {};// result = {a:[],b:[]} //遍历数据 for(var i in data){ // 获取首字母并转大写
var ucword = i[0].toUpperCase(); // 判断result中是否有当前首字母的属性 没有就添加一个默认的数组 if(!result[ucword]) result[ucword] = []; //将当前车品牌添加到对应的数组中去 result[ucword].push(data[i].name); } //将分组处理后的数据 return出去 return result }, makeList:function(){ //获取分组数据 var data = this.group(make_json); //遍历分组数据生成html var html = ''; //遍历分组数据 for(var i in data){ //添加分组字母 html+='<li class="group" data-word="'+i+'">'+i+'</li>'; //遍历当前分组中的数据 for(var j = 0; j<data[i].length;j++){ html+='<li>'+data[i][j]+'</li>'; } } //更新列表 document.querySelector('.list').innerHTML = html; }, init:function(){ //生成品牌列表 this.makeList(); //生成按钮
this.setBtn(); //执行触摸移动 this.move(); }, //设置按钮（创建按钮）
setBtn:function(){ //遍历生成ABCD.... var data = 'abcdefghijklmnopqrstuvwxyz'.toUpperCase().split(''); //遍历生成li var html = ''; for(var i = 0; i<data.length;i++){ html+='<li>'+data[i]+'</li>'; } //更新按钮列表 var btn = document.querySelector('.btn'); btn.innerHTML = html; //平均高度等于可视区域高度/数量 var height = Math.floor(document.documentElement.clientHeight/26); //更新行高 btn.style.lineHeight = height+'px'; //将剩余的几像素作为ul的内边距 var padding = document.documentElement.clientHeight- height*26; btn.style.paddingBottom = (padding)+'px 0'; }, //按钮触摸移动事件 move:function(){ var btn = document.querySelector('.btn'); var echo = document.querySelector('.echo'); btn.addEventListener('touchmove',function(e){ //阻止浏览器默认行为 （如果触摸移动不生效可以在触摸开始时阻止浏览器默认行为）
e.preventDefault(); //获取第一个触摸点
e = e.changedTouches[0]; // 获取鼠标 的Y轴位置 var y = e.clientY; // 拿当前Y坐标 /每格的高度 向上取整 //获取每格高度
var height = Math.floor(document.documentElement.clientHeight/26); var index = Math.ceil(y/height); // 根据计算出来的索引值找到指定的按钮 var li = document.querySelector('.btn li:nth-child('+index+')'); //如果找到对应的元素 if(li){ //获取当前li里面的字母 var word = li.innerHTML; //显示字母窗口并更新里面的内容 echo.style.display = 'block'; echo.innerHTML = word; // 根据字母 查找 自属性里面为当前字母的元素（找到对应一行） var li = document.querySelector('.list li[data-word='+word+']'); //如果找到对应的li
if(li){ // 获取要滚动到这个li的 位置 var otop = li.offsetTop; // 设置滚动条的位置为当前字母的位置 window.scrollTo(0,otop)
//console.log(otop) }
} }); function end(){ echo.style.display = 'none'; } //添加触摸结束与取消事件 执行相同的回调函数 btn.addEventListener('touchend',end);
btn.addEventListener('touchcancel',end); } } car.init(); })(); /**
* {
* a:[aodi],
* b:[benchi,baoma,....]
*
* }
*
*
*/ </script>
</html>
fullPage的使用的更多相关文章
- fullpage.js全屏滚动插件使用小结
刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...
- [转载]fullPage.js中文api 配置参数~
fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 ...
- 高端大气上档次的fullPage.js
简介 4月15日,网易邮箱升级到6.0版本,并发布了介绍页面,页面采用了时下非常流行的"全屏"效果,文字.图片再加上 CSS3 动画,让用户非常直观.清晰的了解6.0版本的功能及特 ...
- fullPage.js学习笔记
中秋节,一个人呆着,挺无聊的,还是学习最有趣,不论是什么,开阔视野都是好的. 参考网址:http://www.dowebok.com/77.html 上面有详细介绍及案例展示,很不错哦,可以先去看看 ...
- 如何解决wow.js与fullpage的兼容性
项目需要做到全屏显示的同时还需要做到实时执行动画.但是发现在使用fullpage之后,wow.js(不知道这个是啥的点击这里)不起作用. 找了诸多资料,解决方法如下: $('#fullpage').f ...
- 移动端框架篇-控制子容器的滑屏框架-fullPage.js
控制子容器法 方法是只显示其中一个子元素,其它隐藏,滑屏时隐藏当前元素,并显示当前元素的下一个同辈元素~ 这里采用fullPage框架,库大小7.69K~ fullPage框架的页面样式无需自定义,已 ...
- jQuery全屏滚动插件fullPage.js
github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link ...
- fullpage 插件学习心得
fullpage.js 是一个基于jquery 的插件,它能够轻松的制作出高大上的全屏网站,主要功能有; 1．支持鼠标滚动 2．支持前进后退和键盘控制 3．多个回调函数 4．支持 CSS3 动画 5． ...
- 制作手机相册 全屏滚动插件fullpage.js
今天是端午自己做了一个小的送祝福链接 这里用到了fullpage插件 $('#container').fullpage({ navigation: false, //navigatio ...
- fullpage 单屏高度超过屏幕高度，实现单屏内可以滚动并解决手机端单屏高度不正确的问题
最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...
随机推荐
- CSS3 媒体查询@media 查询（响应式布局）
例:如果文档宽度小于 300 像素则修改背景颜色(background-color): @media screen and (max-width: 300px) { body { background ...
- 机器学习 Matplotlib库入门
2017-07-21 15:22:05 Matplotlib库是一个优秀的python的数据可视化的第三方类库,其中的pyplot支持了类似matlab的图像输出操作.matplotlib.pyplo ...
- 百度echart如何动态生成图表
百度echart如何动态生成图表 一.总结 一句话总结: clear hideloading setOption 主要是下面三行代码: myChart.clear(); //清空画布myChart.h ...
- spring boot 日志文件配置（logback-spring.xml）亲测可用！
问题描述:如何配置springboot项目,通过日志配置,使之输出自定义日志. 详细文章:https://blog.csdn.net/gebitan505/article/details/701421 ...
- WPF编程学习 —— 样式
本文目录 1.引言 2.怎样使用样式? 3.内联样式 4.已命名样式 5.元素类型样式 6.编程控制样式 7.触发器 1.引言 样式(Style),主要是用来让元素或内容呈现一定外观的属性.WPF中 ...
- 新概念 Lesson 4 Are you a teacher
打招呼用语: Good morning, Good afternoon,Good evening Nice to meet you. How do you do? She is French. 她是法 ...
- 1月28日周日，更新ruby到2.5.0版，rvm更新。
在学习Array的方法的时候,发现文档concat方法可以进行多个数组的添加,而我的不行,猜测是ruby版本没有更新. 查询2.31ruby版本的concat方法,果然和2.5版本的不一样. 于是准备 ...
- week 1
day1 订正 学习AC自动机 day2 mobius反演 对偶图 codeforces day3 ZR模拟赛 订正 day4 复习AC自动机 题库 https://www.cnblogs.com/c ...
- JavaScript 对象的使用
JavaScript支持面向对象的编程方法. 2.9.1 window对象(窗口对象)的常用方法 内部函数 alert ( ) ,实际上是 window 对象的方法,写成全称为 window . al ...
- How to create VO s and VLs dynamically in OAF
I have to create 2 VO objects dynamicaly and created 2 VL's dynamically .I have a static HGrid.and i ...