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.单屏高度超过屏幕高度,实现单屏的滑动 ...

随机推荐

Angular2，Springboot，Zuul，Shiro跨域CORS请求踩坑实录
前言:前后端分离,业务分离,网关路由等已经成为当下web application开发的流行趋势.前端以单页面路由为核心的框架为主体,可以单独部署在nodejs或nginx上.后端以springboot ...
react notes
jsx 在JSX中嵌入用户输入是安全的,默认情况下, 在渲染之前, React DOM 会格式化(escapes) JSX中的所有值. 从而保证用户无法注入任何应用之外的代码. 在被渲染之前,所有的数 ...
新的请求方式 fetch和axios
参考链接:https://www.javascriptcn.com/read-5840.html axios使用文档: https://www.kancloud.cn/yunye/axios/2348 ...
img srcset 和 sizes
img srcset 和 sizes 诞生的目的是解决图片清晰度和节省加载图片大小问题,比方说我需要在retina高的硬件上看到更细腻的图片,又或者我要在电脑看到的图片和在手机上的图片不一样. 解 ...
C# 通过Newtonsoft.Json.dll序列化日期的处理
Newtonsoft.Json.dll提供了非常好的Json序列化和反序列化方式,但是对日期的处理却让我纠结了很久.首先定义类如下: public class Student{ public int ...
nginx File not found 错误
使用php-fpm解析PHP,"No input file specified","File not found"是令nginx新手头疼的常见错误,原因是php ...
English trip -- Review Unit4 Health 健康
medicine n. 药:医学:内科:巫术 vt. 用药物治疗:给…用药 drug 毒药;药店(drugstore) pill 药丸 patient 病人 head 头 hands 手 ...
011 - JDK自带的性能监控工具
一.概要: jps -l 查看现有的java进程 jps -l 显示所有正在运行的java进程id jstack 查看Java线程 jstack -l pid; 做thread du ...
android--------根据文件路径使用File类获取文件相关信息
Android通过文件路径如何得到文件相关信息,如文件名称,文件大小,创建时间,文件的相对路径,文件的绝对路径等. 如图: public class MainActivity extends Act ...
『Nltk』常用方法
引言在nltk的介绍文章中,前面几篇主要介绍了nltk自带的数据(书籍和语料),感觉系统学习意义不大,用到哪里看到那里就行(笑),所以这里会从一些常用功能开始,适当略过对于数据本体的介绍. 文本处理 ...

fullPage的使用

fullPage的使用的更多相关文章

随机推荐

热门专题