JQuery实现相邻item焦点移动的示例详解
更新时间：2022年04月26日 09:19:36 作者：Lievvvvvvvvvvy
这篇文章主要为大家介绍了如何利用JQuery实现相邻item焦点移动的效果，文中的示例代码讲解详细，对我们学习前端知识有一定的帮助，感兴趣的可以学习一下
需求
需求是A1按上下左右按键是选中相应左最近，右最近，上最近，下最近的元素B
代码设计
①所有元素需要给定一个固定i d，例如 A1 为a c_1
②通过元素的左上角、左下角、右上角、右下角位置来计算距离，上下左右对应计算的角不一样
③先算出水平距离，拿到水平水平距离距离相同或者相差10PX的元素
④图片说明：
实现代码
/* 通过计算两点之间的相对距离，使其跳到最近的一个元素
* @param {*} el 基准元素 ac_1
* @param {*} elementsArr 与基准元素做比较的元素数组（类数组）
* 中心点计算法已经弃用
*/
function toClosest(el,elementsArr) {
var e = event || window.event || arguments.callee.caller.arguments[0];//获取按下按键对象
/* @param {*} curLi_x_l 基准元素左边横坐标
* @param {*} curLi_x_r 基准元素右边横坐标
* @param {*} curLi_y_t 基准元素上边纵坐标
* @param {*} curLi_y_b 基准元素下边纵坐标
* @param {*} curLi_x_c 基准元素中心点横坐标
* @param {*} curLi_x_c 基准元素中心点纵坐标
*/
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
/* @param {*} positionArr 需比较元素的坐标信息数组*/
var positionArr = []
$.each(elementsArr, function (index, item) {
if ($('#' + el).attr('id') != $(item).attr('id')) {
/* @param {*} preOrNext_x_l 基准元素左边横坐标
* @param {*} preOrNext_x_r 基准元素右边横坐标
* @param {*} preOrNext_y_t 基准元素上边纵坐标
* @param {*} preOrNext_y_b 基准元素下边纵坐标
* @param {*} preOrNext_x_c 基准元素中心点横坐标
* @param {*} preOrNext_x_c 基准元素中心点纵坐标
*/
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
/* @param {*} element 被遍历元素的坐标信息*/
var element = {};
/* 此步会筛选需比较的元素
* @param {*} element.ac_in 比较元素标记
* @param {*} element.distance 基准元素与比较元素的中心点距离
* @param {*} element.x 比较元素比较点横坐标
* @param {*} element.y 比较元素比较点纵坐标
* @param {*} element.abs_x 比较元素比较点纵坐标与基准元素比较点横距离绝对值
* @param {*} element.abs_y 比较元素比较点纵坐标与基准元素比较点纵距离绝对值
* @param {*} element.abs_distance 比较元素比较点与基准元素比较点距离
*/
// 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
// }
// }
/* @param {*} same_x_positionArr 横坐标最近元素数组*/
/* @param {*} same_x_positionArr 纵坐标最近元素数组*/
/*
寻邻规则：
①向右，首先判断横距离，再判断纵距离
②向左，首先判断横距离，再判断纵距离
③向上，首先判断竖距离，再判断横距离
④向下，首先判断竖距离，再判断横距离
*/
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焦点移动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法,可实现页面滚动的时候指定位置悬浮固定的效果,涉及jquery针对页面元素属性的动态操作技巧,需要的朋友可以参考下2015-08-08
下面小编就为大家带来一篇jQuery动态创建元素以及追加节点的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了JQuery实现动态添加删除评论的方法,涉及jQuery处理鼠标事件及json数据的相关技巧,需要的朋友可以参考下2015-05-05
在jQuery 中只要用行uaMatch()这个函数。用到的关键点有:1.regExp.exec(str)；2.navigator.userAgent;2011-02-02
这篇文章主要介绍了jQuery上传多张图片带进度条样式,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
这篇文章主要为大家详细介绍了jQuery创建折叠式菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()2015-05-05
这篇文章主要介绍了jQuery的层级查找方式,结合实例形式分析了jQuery常用的三种层级查找的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了jQuery实现contains方法不区分大小写的方法,实例分析了针对contains方法的重写技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
下面小编就为大家带来一篇对象不支持indexOf属性或方法的解决方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
最新评论