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