Js cool ball running along the straight line navigation bar special effects source code sharing

Js cool ball running along the straight line navigation bar special effects source code sharing

 

I have been working on an enterprise website recently. Today, I want to share a front-end demo with JavaScript.

The main effect, first. As follows:

Ha ~ I have stolen the logo of the Code. Don't blame me.

Because it is not deployed on the internet, I will describe the main animation effects!

First effect: There is a ball in it that will run along the red lines. when it encounters a circle, it will circle and then run a straight line. When it encounters a circle, it will run around the circle, this is the first animation effect until you finish running all the straight lines and start running again.

Second effect: when the data is suspended on any circle, the ball will always run around the circle until the mouse http: // mark leaves. When the mouse leaves, the ball starts to run at the starting position.

Let's talk about the principle: in fact, the position offset in css is used, and the ball is a gif dynamic image. The fact that css is used to change the position of the ball leads to the effect we see. There are two main effects: linear motion and circular motion.

The core code of linear motion:

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

The main core code of the circle is as follows:

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

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

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

Use the two functions cos () and sin () in high school mathematics to draw circles.