<!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>