Heim > Fragen und Antworten > Hauptteil
焦点定位。
这个页面是读取XML生成的,全部是p布局。
初始化后能得到的数据有一个包括页面所有焦点元素、元素的left、top、width、height的无序数组。
需求:按遥控器上下左右的时候,光标能正确的定位。
比如:现在光标在 看大片 按又跳到 热剧、按左跳到左侧 推荐、按下跳到 澳门风雨 三角图标。
现在的思路是先获取当前光标所在元素的 left、top。
然后再循环整个数组,如果向右 则获取所有 left值大于 当前焦点元素的left值的元素。再获取top最接近当前焦点元素top的元素。代码如下:
var right=function(){
//1、当向右时,获取所有left大于触发焦点的元素left的元素
//2、在获取到的元素集合中取top值最接近触发焦点元素top的元素
//3、设置得到元素的焦点
var buts = [];
var top = Number(selectBut.buttonData.top); //获取当前元素的top
var left = Number(selectBut.buttonData.left); //获取当前元素的left
for(var i = 0; i < _Btns.length;i++){
var but1 = _Btns[i];
if(selectBut.buttonData.id != but1.buttonData.id){
var _left = Number(but1.buttonData.left);
// var _top = Number(but1.buttonData.top);
if(_left > left){
buts.push(but1);
}
}
}
if(buts && buts.length > 0) {
selectBut = buts.sort(function (a, b) { //获取top最接近触发事件元素的元素
return Math.abs(a.buttonData.top - top) - Math.abs(b.buttonData.top - top);
})[0];
selectBut.focus();
}
};
但是向左的时候,top最接近的有3个,由于排序问题,或跳过中间两个,光标跑到最前面去了。
比如,初始光标在 资费说明 这个时候向左,光标直接跑到 热剧
向右也是同样的问题,如果光标在 热剧 ,向右会直接跑到 资费说明
向左代码如下:
var left=function(){
//1、当向左时,获取所有left小于触发焦点的元素left的元素
//2、在获取到的元素集合中取top值最接近触发焦点元素top的元素
//3、设置得到元素的焦点
var buts = [];
var top = Number(selectBut.buttonData.top); //获取当前元素的top
var left = Number(selectBut.buttonData.left); //获取当前元素的left
for(var i = 0; i < _Btns.length;i++){
var but1 = _Btns[i];
if(selectBut.buttonData.id != but1.buttonData.id){
var _left = Number(but1.buttonData.left);
if(_left < left){
buts.push(but1);
}
}
}
if(buts && buts.length > 0){
selectBut = buts.sort(function(a, b) { //获取top最接近触发事件元素的元素
return Math.abs(a.buttonData.top - top) - Math.abs(b.buttonData.top - top);
})[0];
selectBut.focus();
}
};
向下代码如下:
var down=function(){
//1、当向下时,获取所有top大于触发焦点的元素top的元素
//2、在获取到的元素集合中取left值最接近触发焦点元素left的元素
//3、设置得到元素的焦点
var buts = [];
var top = Number(selectBut.buttonData.top); //获取当前元素的top
var left = Number(selectBut.buttonData.left); //获取当前元素的left
for(var i = 0; i < _Btns.length;i++){
var but1 = _Btns[i];
if(selectBut.buttonData.id != but1.buttonData.id){
var _top = Number(but1.buttonData.top);
if(_top > top){
buts.push(but1);
}
}
}
if(buts && buts.length > 0) {
selectBut = buts.sort(function (a, b) { //获取top最接近触发事件元素的元素
return Math.abs(a.buttonData.left - left) - Math.abs(b.buttonData.left - left);
})[0];
selectBut.focus();
}
};
向上代码如下:
var up=function(){
//1、当向上时,获取所有top小于触发焦点的元素top的元素
//2、在获取到的元素集合中取left值最接近触发焦点元素left的元素
//3、设置得到元素的焦点
var buts = [];
var top = Number(selectBut.buttonData.top); //获取当前元素的top
var left = Number(selectBut.buttonData.left); //获取当前元素的left
for(var i = 0; i < _Btns.length;i++){
var but1 = _Btns[i];
if(selectBut.buttonData.id != but1.buttonData.id){
var _top = Number(but1.buttonData.top);
if(_top < top){
buts.push(but1);
}
}
}
if(buts && buts.length > 0) {
selectBut = buts.sort(function (a, b) { //获取top最接近触发事件元素的元素
return Math.abs(a.buttonData.left - left) - Math.abs(b.buttonData.left - left);
})[0];
selectBut.focus();
}
};
ringa_lee2017-04-11 11:53:54
正在做这个,但是本人才刚学不久,基本就先掌握了页面UI布局这一块,JS刚开始学,焦点数组怎么存呢!页面所有p的焦点具体怎么存呢? 求指教