欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery實現(xiàn)相鄰item焦點移動的示例詳解

 更新時間:2022年04月26日 09:19:36   作者:Lievvvvvvvvvvy  
這篇文章主要為大家介紹了如何利用JQuery實現(xiàn)相鄰item焦點移動的效果,文中的示例代碼講解詳細,對我們學習前端知識有一定的幫助,感興趣的可以學習一下

需求

需求是A1按上下左右按鍵是選中相應左最近,右最近,上最近,下最近的元素B

代碼設計

①所有元素需要給定一個固定i d,例如 A1 為a c_1

②通過元素的左上角、左下角、右上角、右下角位置來計算距離,上下左右對應計算的角不一樣

③先算出水平距離,拿到水平水平距離距離相同或者相差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
}

設計理念

主要是根據(jù)當前元素的上下左右四個角,與被比較元素的上下左右四個角,以及按鍵時間,按規(guī)則來確定下一個到底是誰。之所以不用元素中心點之間的距離來比較,還是因為需求的問題。

用處

在機頂盒H5頁面中使用,當然考慮到語法適配問題,以及性能問題,可以做各自的優(yōu)化。例如,我這個頁面的用法就有所不同,是比較當前元素,與當前欄所有元素或者上一欄或者下一欄元素比較,不會使用所有元素去比較,避免太多的代碼執(zhí)行。

疑問

機頂盒的項目算是小眾項目。我剛接手的時候,頁面展示是靜態(tài)的,所以指定下一個選中目標就可以了。但是后面就有了改變,我的頁面欄目是動態(tài)的,所有欄目運營隨意配置順序。經(jīng)過一番思考之后,使用了這種方法。其實做個工作的同行應該也有挺多的,我很想知道大家是怎么做的,如何更有效率。

到此這篇關(guān)于JQuery實現(xiàn)相鄰item焦點移動的示例詳解的文章就介紹到這了,更多相關(guān)JQuery相鄰item焦點移動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • jQuery中innerHeight()方法用法實例

    jQuery中innerHeight()方法用法實例

    這篇文章主要介紹了jQuery中innerHeight()方法用法,實例分析了innerHeight()方法的功能、定義及獲取第一個匹配元素內(nèi)部區(qū)域高度的使用技巧,需要的朋友可以參考下
    2015-01-01
  • 一個支持任意尺寸的圖片上下左右滑動效果

    一個支持任意尺寸的圖片上下左右滑動效果

    如果你的網(wǎng)站風格適合,可以用這種方式來給頁面布局,支持任意尺寸的圖片滑動、上下左右滑動,需要的朋友可以參考下
    2014-08-08
  • 使用jQuery實現(xiàn)擲骰子游戲

    使用jQuery實現(xiàn)擲骰子游戲

    這篇文章主要介紹了使用jQuery實現(xiàn)擲骰子游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • jquery 插件學習(二)

    jquery 插件學習(二)

    除了全局函數(shù)外,jquery中的大多數(shù)插件都是通過jquery對象的方法提供的
    2012-08-08
  • 基于jquery實現(xiàn)自定義的audio

    基于jquery實現(xiàn)自定義的audio

    最近接到一個古早的項目變更,設計的音樂播放的功能是自定義的樣式,對于jquery的項目第一反應是先找插件,然而找了半天沒找到,最后只能自己實現(xiàn),文中有詳細的代碼示例供大家參考,需要的朋友可以參考下
    2023-12-12
  • 11款新鮮的jQuery插件[附所有demo下載]

    11款新鮮的jQuery插件[附所有demo下載]

    每天都會有新的jQuery插件誕生,這里和大家分享最新出爐的11款在實際項目中可能用到的jQuery插件,提供整理后的實例下載。
    2011-01-01
  • 使用jQuery實現(xiàn)星級評分代碼分享

    使用jQuery實現(xiàn)星級評分代碼分享

    本文給大家分享的是一段使用jQuery制作的星級評分的代碼,非常大氣漂亮,功能也很實用,這里推薦個大家。
    2014-12-12
  • jQuery siblings()用法實例詳解

    jQuery siblings()用法實例詳解

    siblings() 獲得匹配集合中每個元素的同胞,通過選擇器進行篩選是可選的。接下來通過本文給大家介紹jQuery siblings()用法實例詳解,需要的朋友參考下吧
    2016-04-04
  • jquery實現(xiàn)的帶縮略圖的焦點圖片切換(自動播放/響應鼠標動作)

    jquery實現(xiàn)的帶縮略圖的焦點圖片切換(自動播放/響應鼠標動作)

    帶縮略圖的焦點圖片切換在實際應用中很廣泛的,鼠標滑上焦點圖時停止自動播放,滑出時開始自動播放及鼠標滑上后顯示按鈕、顯示大圖等等,感興趣的朋友可以了解下
    2013-01-01
  • JQuery contains的選擇器

    JQuery contains的選擇器

    contains選擇符是指對象中包括指定內(nèi)容的對象本身
    2010-04-04

最新評論