JS效果 導航鼠標跟隨

吐槽時間,我這智商,就弄這些邏輯,差點就暈了。
先上效果圖:

效果圖
效果圖

再上網(wǎng)頁鏈接:
真實效果

由于二級導航間(就是寫了“文字兄兄”的導航欄)的距離會不大一樣,所有其中有個值需要手動調(diào)節(jié),這個值的意思是相對于“wrap”的位置

//需要計算的值x_less_arr
    x_less_arr = [100,250,392,542,688,836];//具體情況具體看  計算方法 "xx-x_less";即鼠標x橫坐標位置"xx"減去差值"x_less"
//x_less為整個窗口大小與wrap大小差值的一半
    var x_less = ($(window).width()-980)/2;  //x的差值 即可視窗口大小減去980后再除以2
//xx為距離左側(cè)窗口的位置 使用時打開如下console 記錄下數(shù)值
    // console.log(xx)   //鼠標的x值 計算x_less_arr時打開注釋

收工!
我能吐槽說這是我干過的邏輯最復雜的導航條了嗎...不要鄙視我
(隱藏小彩蛋 戳搜索圖標 變身?。?/p>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,008評論 25 709
  • 夜深人靜,雙手合十,心懷感恩,愿天下所有人都能放下過往! 生命中的一切都來的輕松、愉悅而充滿榮耀且值得感恩! 睡覺...
    心靈國度閱讀 307評論 0 0
  • 愛麗絲and兔子先生閱讀 520評論 2 12
  • 和周笨笨的旅行第一站,由廈門鼓浪嶼改到三亞再改到鳳凰,兩人特別想去三亞,但米米有限,游玩回家就無積蓄也,可見想走就...
    xiaoxiao夢兒閱讀 255評論 0 0
  • 從第一次見到簡書,就喜歡上了他的排版,試一試這個排版,歡迎拍磚! 前面是H1,這次使用H2,markdown的字號...
    iloyu007閱讀 367評論 0 1

友情鏈接更多精彩內(nèi)容