JS效果 导航鼠标跟随

吐槽时间,我这智商,就弄这些逻辑,差点就晕了。
先上效果图:

效果图
效果图

再上网页链接:
真实效果

由于二级导航间(就是写了“文字兄兄”的导航栏)的距离会不大一样,所有其中有个值需要手动调节,这个值的意思是相对于“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时打开注释

收工!
我能吐槽说这是我干过的逻辑最复杂的导航条了吗...不要鄙视我
(隐藏小彩蛋 戳搜索图标 变身!)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,173评论 25 709
  • 夜深人静,双手合十,心怀感恩,愿天下所有人都能放下过往! 生命中的一切都来的轻松、愉悦而充满荣耀且值得感恩! 睡觉...
    心灵国度阅读 1,748评论 0 0
  • 爱丽丝and兔子先生阅读 3,255评论 2 12
  • 和周笨笨的旅行第一站,由厦门鼓浪屿改到三亚再改到凤凰,两人特别想去三亚,但米米有限,游玩回家就无积蓄也,可见想走就...
    xiaoxiao梦儿阅读 1,501评论 0 0
  • 从第一次见到简书,就喜欢上了他的排版,试一试这个排版,欢迎拍砖! 前面是H1,这次使用H2,markdown的字号...
    iloyu007阅读 2,635评论 0 1