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.单屏高度超过屏幕高度,实现单屏的滑动 ...
随机推荐
- c++ primer plus 第四章 课后题答案
#include<iostream> #include<string> using namespace std; int main() { string first_name; ...
- 使用NativeExtension向AIR app 添加Activity和BroadCastReceiver（2）
开发: Android项目 新建一个针对NativeExtension的Android项目,实现相应的FREContext,FREExtension和FREFunction等方法,同时新建一个Acti ...
- RPC 服务器不可用
1,查看“Remote Procedure Call (RPC)”启动2,设置下面选项.・Hyper-V服务器->虚拟交换机管理器,在虚拟交换机的[连接类型]下, 勾选[允许管理操作系统共享此网 ...
- NHibernate 映射关系
基本映射关系如下: NHibernate类型 .NET类型 Database类型 备注 AnsiChar System.Char DbType.AnsiStringFixedLength - 1 ch ...
- 20170709pptVBA递归删除LOGO图片与文字
Public Sub StartRecursionFolder() Dim Pre As Presentation Dim FolderPath As String Dim pp As String ...
- Sidekiq（部分基础，有几个使用案例和active_job的用法）
Sidekiq (8700✨) git : https://github.com/mperham/sidekiq https://www.cnblogs.com/richard1234/p/3829 ...
- android--------验证码倒计时
在我们注册或者修改信息的时候,常会用到60s倒计时这个功能,写了这篇文章,大家共享一下: 效果图: 直接上代码: activity.java public class MainActivity ext ...
- YOLO v2 损失函数源码分析
损失函数的定义是在region_layer.c文件中,关于region层使用的参数在cfg文件的最后一个section中定义. 首先来看一看region_layer 都定义了那些属性值: layer ...
- HttpServletResponse输出的中文乱码
HttpServletResponse输出有两种格式,一种是字符流,一种是字节流. 1.字符流 // 这句话的意思,是让浏览器用utf8来解析返回的数据,即设置客户端解析的编码 response.se ...
- OC 文件基本操作
// // main.m // oc_13 // // Created by ma c on 15/12/17. // Copyright (c) 2015年 博文科技. All rights res ...