JQuery實現(xiàn)相鄰item焦點移動的示例詳解
更新時間：2022年04月26日 09:19:36 作者：Lievvvvvvvvvvy
這篇文章主要為大家介紹了如何利用JQuery實現(xiàn)相鄰item焦點移動的效果，文中的示例代碼講解詳細，對我們學習前端知識有一定的幫助，感興趣的可以學習一下
需求
需求是A1按上下左右按鍵是選中相應(yīng)左最近，右最近，上最近，下最近的元素B
代碼設(shè)計
①所有元素需要給定一個固定i d，例如 A1 為a c_1
②通過元素的左上角、左下角、右上角、右下角位置來計算距離，上下左右對應(yīng)計算的角不一樣
③先算出水平距離，拿到水平水平距離距離相同或者相差10PX的元素
④圖片說明：
實現(xiàn)代碼
/* 通過計算兩點之間的相對距離，使其跳到最近的一個元素
* @param {*} el 基準元素 ac_1
* @param {*} elementsArr 與基準元素做比較的元素數(shù)組（類數(shù)組）
* 中心點計算法已經(jīng)棄用
*/
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 需比較元素的坐標信息數(shù)組*/
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 橫坐標最近元素數(shù)組*/
/* @param {*} same_x_positionArr 縱坐標最近元素數(shù)組*/
/*
尋鄰規(guī)則：
①向右，首先判斷橫距離，再判斷縱距離
②向左，首先判斷橫距離，再判斷縱距離
③向上，首先判斷豎距離，再判斷橫距離
④向下，首先判斷豎距離，再判斷橫距離
*/
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
}設(shè)計理念
主要是根據(jù)當前元素的上下左右四個角，與被比較元素的上下左右四個角，以及按鍵時間，按規(guī)則來確定下一個到底是誰。之所以不用元素中心點之間的距離來比較，還是因為需求的問題。
用處
在機頂盒H5頁面中使用，當然考慮到語法適配問題，以及性能問題，可以做各自的優(yōu)化。例如，我這個頁面的用法就有所不同，是比較當前元素，與當前欄所有元素或者上一欄或者下一欄元素比較，不會使用所有元素去比較，避免太多的代碼執(zhí)行。
疑問
機頂盒的項目算是小眾項目。我剛接手的時候，頁面展示是靜態(tài)的，所以指定下一個選中目標就可以了。但是后面就有了改變，我的頁面欄目是動態(tài)的，所有欄目運營隨意配置順序。經(jīng)過一番思考之后，使用了這種方法。其實做個工作的同行應(yīng)該也有挺多的，我很想知道大家是怎么做的，如何更有效率。
到此這篇關(guān)于JQuery實現(xiàn)相鄰item焦點移動的示例詳解的文章就介紹到這了,更多相關(guān)JQuery相鄰item焦點移動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了jquery中change()用法,實例分析了change的功能、定義及具體的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
jQuery實現(xiàn)獲取table中鼠標click點擊位置行號與列號的方法
這篇文章主要介紹了jQuery實現(xiàn)獲取table中鼠標click點擊位置行號與列號的方法,涉及jQuery事件響應(yīng)及針對table表格元素相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
JQuery將文本轉(zhuǎn)化成JSON對象需要注意的問題
在JQuery的許多方法中，很多方法的參數(shù)可以傳入一個JSON對象，比如Ajax方法的第二個參數(shù)。怎么將文本轉(zhuǎn)化成JSON對象，需要注意以下問題2011-05-05
這篇文章主要介紹了jQuery實現(xiàn)類似標簽風格的導航菜單效果代碼,涉及jquery鼠標事件操作頁面元素的遍歷與樣式動態(tài)修改技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
Jquery Ajax 學習實例2 向頁面發(fā)出請求 返回JSon格式數(shù)據(jù)
處理業(yè)務(wù)數(shù)據(jù)，產(chǎn)生JSon數(shù)據(jù)，供JqueryRequest.aspx調(diào)用2010-03-03
這篇文章主要介紹了jQuery中parents()方法用法,實例分析了parents()方法的功能、定義及取得一個包含著所有匹配元素的父輩元素的元素集合使用技巧,需要的朋友可以參考下2015-01-01
JQuery查找子元素find()和遍歷集合each的方法總結(jié)
下面小編就為大家?guī)硪黄狫Query查找子元素find()和遍歷集合each的方法總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
BootStrap的table表頭固定tbody滾動的實例代碼
本文給大家分享一段關(guān)于BootStrap的table表頭固定tbody滾動的實例代碼,代碼簡單易懂，需要的朋友可以參考下2016-08-08
jquery單選框radio綁定click事件實現(xiàn)方法
這篇文章主要介紹了jquery單選框radio綁定click事件實現(xiàn)方法,可實現(xiàn)針對單選框radio值的改變作出響應(yīng),非常具有實用價值,需要的朋友可以參考下2015-01-01
jquery插件lazyload.js延遲加載圖片的使用方法
lazyload.js是一個基于JQuery的插件，可以用來緩沖加載圖片。下面介紹這個插件的使用方法2014-02-02