js炫酷小球沿著直線跑動導航條特效源碼分享

js炫酷小球沿著直線跑動導航條特效源碼分享

 

最近一直在做企業的網站，今天分享一個前端的demo主要想分享的就是js。

主要的效果，先吧。如下：

哈~ 盜了一下最代碼的logo，大牛不要怪罪我啊。

這裡因為沒有部署到網上，我就描述一下主要的動畫效果吧！

第一個效果：裡面有個小球的 會沿著紅色的線條跑，遇到圓就會繞一圈然後接著跑直線，遇到圓又繞著圓跑，直到把直線都跑完為止，然後重新開始跑，這是第一個動畫效果。

第二個效果：資料懸浮在任何一個圓上，小球都會一直繞著圓跑直到鼠http://標離開，當滑鼠離開後，小球又沖開始的位置開始跑。

說說原理吧：其實就是利用css裡面的位置位移，小球是張gif動態圖片，利用css對小球的位置事實改變就導致了我們看見的這個效果了。裡面主要是分兩個效果，一個是直線運動，一個是畫圓運動。

其中，直線運動核心代碼：

1	$('#point').css({left:(startX++)+'px',top:startY});

圓的主要核心代碼，如下：

1	startX = circleX-(Math.cos(angle)*radius);

2	startY = circleY-(Math.sin(angle)*radius);

3	$('#point').css({left:startX+'px',top:startY});

利用高中數學裡面的兩個函數 cos()和sin()畫圓。