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.单屏高度超过屏幕高度,实现单屏的滑动 ...
随机推荐
- EM算法及其推广
概述 EM算法是一种迭代算法,用于含有隐变量(hidden variable)的概率模型参数的极大似然估计,或极大后验概率估计. EM算法的每次迭代由两步组成:E步,求期望(expectation): ...
- 20170728xlVba还是这个混蛋
Public Sub Main22() If Now() >= #1/1/2018# Then Exit Sub Dim strText As String Dim Reg As Object, ...
- Oracle DISTINCT A 排序问题(转)
请问Oracle 中有ID,A栏要怎么读出栏的不重复值,并且用ID来排序,請大家帮帮忙? 解决方案: ID | A 1 | x 2 | y 3 | x A栏的不重复值: x, y 但用ID來排序时 x ...
- Generate PDF in Sourcing through concurrent request，在EBS java并发中调用指定am的方法
package oracle.apps.pon.printing.cp; import java.io.InputStream; import java.io.FileOutputStream; im ...
- PHP:第四章——PHP数组array_intersect计算数组交集
<pre> <?php //array_intersect计算数组交集 header("Content-Type:text/html;charset=utf-8" ...
- learning uboot bootargs panic parameter
By passing the kernel panic parameter, the system automatically resets after 3 seconds when kernel p ...
- bootstrap的学习总结
1.bootstrap是一个css框架,它提供了很多类,这些类中实现了内外边距,颜色,大小等样式的封装,它还提供了很多常用插件可以直接使用 2.12栅格本质上是将标签的外边距和内边距通过“格子”的思想 ...
- python 复制/移动文件
用python实现将某代码文件复制/移动到指定路径下. 场景例如:mv ./xxx/git/project1/test.sh ./xxx/tmp/tmp/1/test.sh (相对路径./xxx/tm ...
- Mac OS X 10.9下解决cocos2d-x在Xcode4.6.x的模板不显示问题
最近将iMac 升级到10.9了,奇怪的事情发生了,cocos2d-x的模板不见了,鼓捣了半天发现问题所在 打开xcode新建工程却找不到cocos2d-x的模板. 经过在网上的苦苦搜寻和试验后,找到 ...
- Objective-C 类别(category)和扩展(Extension)
1.类别(category) 使用Object-C中的分类,是一种编译时的手段,允许我们通过给一个类添加方法来扩充它(但是通过category不能添加新的实例变量),并且我们不需要访问类中的代码就可以 ...