文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JQuery实现相邻item焦点移动的示例详解

2024-04-02 19:55

关注

需求

需求是A1按上下左右按键是选中相应左最近,右最近,上最近,下最近的元素B

代码设计

①所有元素需要给定一个固定i d,例如 A1 为a c_1

②通过元素的左上角、左下角、右上角、右下角位置来计算距离,上下左右对应计算的角不一样

③先算出水平距离,拿到水平水平距离距离相同或者相差10PX的元素

④图片说明:

实现代码


function toClosest(el,elementsArr) {
    var e = event || window.event || arguments.callee.caller.arguments[0];//获取按下按键对象
    
    
    var curLi_x_l = $('#' + el).offset().left
    var curLi_x_r = $('#' + el).offset().left + $('#' + el).width()
    var curLi_y_t = $('#' + el).offset().top
    var curLi_y_b = $('#' + el).offset().top + $('#' + el).height()
    // var curLi_x_c = $('#' + el).offset().left + $('#' + el).width()/2
    // var curLi_y_c = $('#' + el).offset().top + $('#' + el).height()/2
    
    
    
    var positionArr = []
    $.each(elementsArr, function (index, item) {
        if ($('#' + el).attr('id') != $(item).attr('id')) {
        
           
            var preOrNext_x_l = $(item).offset().left
            var preOrNext_x_r = $(item).offset().left + $(item).width()
            var preOrNext_y_t = $(item).offset().top
            var preOrNext_y_b = $(item).offset().top + $(item).height()
            // var preOrNext_x_c = $(item).offset().left + $(item).width()/2
            // var preOrNext_y_c = $(item).offset().top + $(item).height()/2
            
            
            
            var element = {};
          
          
          	// element.distance = parseInt(Math.pow((curLi_x_c - preOrNext_x_c), 2) + Math.pow((curLi_y_c - preOrNext_y_c), 2))
            //按'向上键'去左下角位置坐标,按'向下键'去左上角位置坐标
            if (e && e.keyCode == 39 && preOrNext_x_l > curLi_x_r) {
                element.ac_in = $(item).attr('id')
                element.x = preOrNext_x_l
                element.y = preOrNext_y_t
                element.abs_y = Math.abs(preOrNext_y_t - curLi_y_t)
                //基准元素右上角和比较元素左上角
                if (curLi_y_t <= preOrNext_y_t) {
                    element.abs_distance = parseInt(Math.pow((curLi_x_r - preOrNext_x_l), 2) + Math.pow((curLi_y_t - preOrNext_y_t), 2))
                }
                element.abs_distance = parseInt(Math.pow((curLi_x_r - preOrNext_x_l), 2) + Math.pow((curLi_y_t - preOrNext_y_t), 2))
                positionArr.push(element)
            } else if (e && e.keyCode == 37 && preOrNext_x_r < curLi_x_l) {
                element.ac_in = $(item).attr('id')
                element.x = preOrNext_x_r
                element.y = preOrNext_y_t
                element.abs_y = Math.abs(preOrNext_y_t - curLi_y_t)
                //基准元素左上角和比较元素右上角
                element.abs_distance = parseInt(Math.pow((curLi_x_l - preOrNext_x_r), 2) + Math.pow((curLi_y_t - preOrNext_y_b), 2))
                positionArr.push(element)
            } else if (e && e.keyCode == 38 && preOrNext_y_b < curLi_y_t) {
                element.ac_in = $(item).attr('id')
                element.x = preOrNext_x_l
                element.preOrNext_x_l = preOrNext_x_l
                element.preOrNext_x_r = preOrNext_x_r
                element.y = preOrNext_y_b
                element.abs_x = Math.abs(preOrNext_x_l - curLi_x_l)
                //基准元素左上角和比较元素左下角
                element.abs_distance = parseInt(Math.pow((curLi_x_l - preOrNext_x_l), 2) + Math.pow((curLi_y_t - preOrNext_y_b), 2))
                positionArr.push(element)
            } else if (e && e.keyCode == 40 && preOrNext_y_t > curLi_y_b) {
                element.ac_in = $(item).attr('id')
                element.x = preOrNext_x_l
                element.y = preOrNext_y_t
                element.preOrNext_x_l = preOrNext_x_l
                element.preOrNext_x_r = preOrNext_x_r
                element.abs_x = Math.abs(preOrNext_x_l - curLi_x_l)
                //基准元素左下角和比较元素左上角
                element.abs_distance = parseInt(Math.pow((curLi_x_l - preOrNext_x_l), 2) + Math.pow((curLi_y_b - preOrNext_y_t), 2))
                positionArr.push(element)
            }
        }
    })
  
  
    // if(positionArr){
    //     positionArr = positionArr.sort(function (a, b) {
    //         return a.abs_distance - b.abs_distance
    //     })
    //     if(positionArr.length>0){
    //         ac_in = positionArr[0].ac_in
    //     }else{
    //         ac_in = el
    //     }
    // }
  
   
   
  
  
  	
  
    if (e && (e.keyCode == 39 || e.keyCode == 37)) {
        positionArr = positionArr.sort(function (a, b) {
            return a.x - b.x
        })
        var same_x_positionArr = []
        if(e.keyCode == 39){
          	if (positionArr.length > 0) {
                for (var i = 0; i < positionArr.length; i++) {
                    if (positionArr[i].x > (positionArr[0].x - 10) && positionArr[i].x < (positionArr[0].x + 10)) {
                        same_x_positionArr.push(positionArr[i])
                    }
                }
            }
        }else if(e.keyCode == 37){
            if (positionArr.length > 0) {
                for (var i = 0; i < positionArr.length; i++) {
                    if (positionArr[i].x > (positionArr[positionArr.length - 1].x - 10) && positionArr[i].x < (positionArr[positionArr.length - 1].x + 10)) {
                        same_x_positionArr.push(positionArr[i])
                    }
                }
            }    
        }
        
        same_x_positionArr = same_x_positionArr.sort(function (a, b) {
            return a.abs_y - b.abs_y
        })
        if (same_x_positionArr.length > 0) {
            ac_in = same_x_positionArr[0].ac_in
        } else {
            ac_in = el
        }
    } else if (e && e.keyCode == 38) {
        positionArr = positionArr.sort(function (a, b) {
            return a.y - b.y
        })
        var same_y_positionArr = []
        if (positionArr.length > 0) {
            for (var i = 0; i < positionArr.length; i++) {
                if (positionArr[i].preOrNext_x_l == curLi_x_l || positionArr[i].preOrNext_x_l == curLi_x_r) {
                    same_y_positionArr.push(positionArr[i])
                } else if (positionArr[i].preOrNext_x_r == curLi_x_l || positionArr[i].preOrNext_x_r == curLi_x_r) {
                    same_y_positionArr.push(positionArr[i])
                } else if (positionArr[i].preOrNext_x_l > curLi_x_l && positionArr[i].preOrNext_x_l < curLi_x_r) {
                    same_y_positionArr.push(positionArr[i])
                } else if (positionArr[i].preOrNext_x_r > curLi_x_l && positionArr[i].preOrNext_x_r < curLi_x_r) {
                    same_y_positionArr.push(positionArr[i])
                } else if (positionArr[i].preOrNext_x_l < curLi_x_l && positionArr[i].preOrNext_x_r > curLi_x_r) {
                    same_y_positionArr.push(positionArr[i])
                }
            }
        }
        if (same_y_positionArr.length > 0) {
            console.log(same_y_positionArr)
            same_y_positionArr = same_y_positionArr.sort(function (a, b) {
                return b.y - a.y
            })
            ac_in = same_y_positionArr[0].ac_in
            console.log(ac_in)
        } else {
            if (positionArr.length > 0) {
                for (var i = 0; i < positionArr.length; i++) {
                    if (positionArr[i].y > (positionArr[positionArr.length - 1].y - 10) && positionArr[i].y < (positionArr[positionArr.length - 1].y + 10)) {
                        same_y_positionArr.push(positionArr[i])
                    }
                }
            }
            same_y_positionArr = same_y_positionArr.sort(function (a, b) {
                return a.abs_x - b.abs_x
            })
            if (same_y_positionArr.length > 0) {
                ac_in = same_y_positionArr[0].ac_in
            } else {
                ac_in = el
            }
        }
    } else if (e && e.keyCode == 40) {
        positionArr = positionArr.sort(function (a, b) {
            return a.y - b.y
        })
        var same_y_positionArr = []
        if (positionArr.length > 0) {
            for (var i = 0; i < positionArr.length; i++) {
                if (positionArr[i].preOrNext_x_l == curLi_x_l || positionArr[i].preOrNext_x_l == curLi_x_r) {
                    same_y_positionArr.push(positionArr[i])
                } else if (positionArr[i].preOrNext_x_r == curLi_x_l || positionArr[i].preOrNext_x_r == curLi_x_r) {
                    same_y_positionArr.push(positionArr[i])
                } else if (positionArr[i].preOrNext_x_l > curLi_x_l && positionArr[i].preOrNext_x_l < curLi_x_r) {
                    same_y_positionArr.push(positionArr[i])
                } else if (positionArr[i].preOrNext_x_r > curLi_x_l && positionArr[i].preOrNext_x_r < curLi_x_r) {
                    same_y_positionArr.push(positionArr[i])
                } else if (positionArr[i].preOrNext_x_l < curLi_x_l && positionArr[i].preOrNext_x_r > curLi_x_r) {
                    same_y_positionArr.push(positionArr[i])
                }
            }
        }
        if (same_y_positionArr.length > 0) {
            console.log(same_y_positionArr)
            same_y_positionArr = same_y_positionArr.sort(function (a, b) {
                return a.y - b.y
            })
            ac_in = same_y_positionArr[0].ac_in
        } else {
            if (positionArr.length > 0) {
                for (var i = 0; i < positionArr.length; i++) {
                    if (positionArr[i].y > (positionArr[0].y - 10) && positionArr[i].y < (positionArr[0].y + 10)) {
                        same_y_positionArr.push(positionArr[i])
                    }
                }
            }
            same_y_positionArr = same_y_positionArr.sort(function (a, b) {
                return a.abs_x - b.abs_x
            })
            if (same_y_positionArr.length > 0) {
                ac_in = same_y_positionArr[0].ac_in
            } else {
                ac_in = el
            }
        }
    }
	return ac_in
}

设计理念

主要是根据当前元素的上下左右四个角,与被比较元素的上下左右四个角,以及按键时间,按规则来确定下一个到底是谁。之所以不用元素中心点之间的距离来比较,还是因为需求的问题。

用处

在机顶盒H5页面中使用,当然考虑到语法适配问题,以及性能问题,可以做各自的优化。例如,我这个页面的用法就有所不同,是比较当前元素,与当前栏所有元素或者上一栏或者下一栏元素比较,不会使用所有元素去比较,避免太多的代码执行。

疑问

机顶盒的项目算是小众项目。我刚接手的时候,页面展示是静态的,所以指定下一个选中目标就可以了。但是后面就有了改变,我的页面栏目是动态的,所有栏目运营随意配置顺序。经过一番思考之后,使用了这种方法。其实做个工作的同行应该也有挺多的,我很想知道大家是怎么做的,如何更有效率。

到此这篇关于JQuery实现相邻item焦点移动的示例详解的文章就介绍到这了,更多相关JQuery相邻item焦点移动内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯