吐槽时间,我这智商,就弄这些逻辑,差点就晕了。
先上效果图:
再上网页链接:
真实效果
由于二级导航间(就是写了“文字兄兄”的导航栏)的距离会不大一样,所有其中有个值需要手动调节,这个值的意思是相对于“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为距离左侧窗口的位置 使用时打开如下console 记录下数值
// console.log(xx) //鼠标的x值 计算x_less_arr时打开注释
收工!
我能吐槽说这是我干过的逻辑最复杂的导航条了吗...不要鄙视我
(隐藏小彩蛋 戳搜索图标 变身!)