鼠标跟随和导航云效果总结

导航云效果.gif

实现的是导航跟踪效果，随着鼠标动，鼠标移开回到原始起点

思考误区：
做导航的时候我以为还是利用鼠标的位置来确定目标位置，这个想法也是可以，但是会出现一个问题，鼠标的位置变化幅度很大，要求出目标位置despos需要

 despos = event.clientx -$("cloud-nav").offsetLeft-$("nav").offsetLeft;

这样做很麻烦，因为这个nav的左右都是有大小的，鼠标是根据屏幕的位置来定的，所以要用鼠标的位置减起来很复杂。
老师给出了一个好的思路

var navItems =$("navbar").children;
console.log(navItems.length);
for (var i = 0; i < navItems.length; i++) {
    avItems[i].onmouseover=function (argument) {
    console.log(this.offsetLeft);
    desXpos=this.offsetLeft;
    }
}

利用每个li标签的位置来确定目标位置，不是更清晰明显了。

• 鼠标移开后回到原点

  $("navbar").onmouseout=function (argument) {
    desXpos=0;
  }
  

缓动公式是最重要的：当前位置=(目标位置-当前位置)/n+当前位置，
n相当与分的段数。

window.setInterval(function () {
currentPos=(desXpos-currentPos)/5+currentPos;
$("cloud-nav").style.left=currentPos+"px";
},100)

---

鼠标跟随效果

鼠标跟随效果.gif

相对简单就不说明了，原理一样

代码库

https://github.com/hejiahao/HTML-front