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.单屏高度超过屏幕高度,实现单屏的滑动 ...
随机推荐
- 使用自定义RadioButton和ViewPager实现TabHost效果和带滑动的页卡效果
在工作中又很多需求都不是android系统自带的控件可以达到效果的,内置的TabHost就是,只能达到简单的效果 ,所以这个时候就要自定义控件来达到效果:这个效果就是: 使用自定义RadioButto ...
- Idea设置默认不折叠一行的函数
- java后台读取/解析 excel表格
需求描述 前台需要上传excel表格,提交到后台,后台解析并返回给前台,展示在前台页面上! 前台部分代码与界面 <th style="padding: 7px 1px;width:15 ...
- Filters: before, after, around, 常用到before_action，执行顺序是从外到内。
Filters是继承的,所以可以在ApplicationControlooer中设置filters. 如果有多个过滤,它们执行的顺序 先父类,然后往下推倒到子类 同一个类,按照代码上下顺序执行.
- C#图片转换成二进制流并且保存到sql server数据库
注意:我要存储文件二进制流的列的类型是text,不是image类型. 我已经实现了从数据库中读取text类型的二进制流,,现在就是不知道怎么存进去. 我的部分关键代码: StreamReader sr ...
- html5- 摘自网友dudu
HTML5中新增了<canvas>画布标签,通过它,可以使用JavaScript在网页中绘制图像.<canvas>标签在网页中得到的是一个矩形空白区域,可以通过width和he ...
- 高性能mysql-----MySQL_explain关键字分析查询语句(一)
转载地址:https://www.cnblogs.com/xpp142857/p/7373005.html MySQL_explain关键字分析查询语句 通过对查询语句的分析,可以了解查询语句的执 ...
- 微信公众号平台开发(二)信息的分类.md
在上一篇博客中,我们只是简单地与微信服务器建立了连接,接下来就是从微信服务器中接收信息了.在SecurityController中,我定义了两个方法(get和post).Get方法是我们用来与微信服务 ...
- jquery组件和插件写法
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- 快速切题 sgu115. Calendar 模拟 难度:0
115. Calendar time limit per test: 0.25 sec. memory limit per test: 4096 KB First year of new millen ...