A JavaScript fondly effects

2020-03-30 02:56:37
OfStack

There is a JavaScript special effect, the effect is as follows:

Not only can appear the effect of the graph below, still can make this graph follow the mouse to rotate, this inside is just a simple without embellish small example, can make courtship based on this example, more fun. Bored coquetty guys, can you send your little girl a web page like this? To force.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405091026534.gif? 201449102712 ">
Paste code:

 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<style type="text/css"> 
body{ 
border:1px red solid; 
width:1000px; 
height:1000px; 
margin : 0px auto; 
padding:0px; 
color:green; 
} 
 
div{ 
position:absolute; 
} 
</style> 
<script type="text/javascript"> 
//Why use onload, because when I initialize the div of the clock in javascript code, the debug page is not implemented
//It turned out that the HTML code was parsed from front to back. When the JavaScript code is parsed first, go to the body
//When you add a child node, you cannot find the body that has not yet been resolved. So we should parse the body first. There are two ways to do it, one is down
//, or you can add the onload method to the body tag.
window.onload=function(){ 
init(); 
}; 
//Define an array of divs to store 12 divs
//Because of the 12 divs, let's first determine the dot and radius so that we can calculate the div position
var divs=[]; 
var loveBaby=[" I "," love "," you "," ! "," treasure "," Mr. "," you "," love "," I "," ? "," mian "," mian "] 
var CX=300; 
var CY=300;//-- does the position coordinate in the web page have units?
var R=150; 
var divCenterNode;//The position of the center point is controlled and global variables are set
//Define an initialized function
function init(){ 
//Create a div with a center point
divCenterNode=document.createElement("div"); 
divCenterNode.innerHTML=" Tingting, marry me! "; 
document.body.appendChild(divCenterNode); 
divCenterNode.style.left=(CX-50)+"px"; 
divCenterNode.style.top=(CY-30)+"px"; 
//Create 12 divs to make a forbidden clock and place it in the body
for(var x=1;x<=12;x++){ 
//Create a div
var divNode=document.createElement("div"); 
divNode.innerHTML=loveBaby[x-1]; 
//The body object doesn't need to be fetched like any other object, the js library is already encapsulated.
document.body.appendChild(divNode); 
divs.push(divNode); 
} 
//Reposition the div element each time startClock() is started
 
startClock(); 

} 
//The offset of div
var offset=0;//Degree offset
//Define a separate function for positioning and rotation of position
function startClock(){ 
for(var x=1;x<=12;x++){ 
var div = divs[x-1]; 
//The degree of each number
var dushu=30*x+offset; 
//Angle * math.pi /180 = radians
var divLeft = CX+R*Math.sin(dushu*Math.PI/180); 
div.style.left=divLeft+"px"; 
var divTop = CY-R*Math.cos(dushu*Math.PI/180); 
div.style.top=divTop+"px"; 
} 
offset+=50; 
//Call this function back at regular intervals
//Evaluates an expression after specifying a value for milliseconds. The first parameter is the expression, and the second parameter is the time
setTimeout(startClock,80);//Method of the window object
} 
//Define the clock to move to different positions with the mouse
function clockMove(event){ 
CX=event.clientX;//The x position of the mouse
CY=event.clientY;//The y position of the mouse
divCenterNode.style.left=(CX-50)+"px"; 
divCenterNode.style.top=(CY-30)+"px"; 

} 
</script> 
</head> 
<body onmousemove="clockMove(event)"> 
<!-- 
 A, 12 The Numbers are displayed in a circle  
1 create 12 a DIV , respectively  1--12 
2 to 12 a DIV Position, circle.  
--> 
</body > 
</html>

The idea was to make a clock display that would turn and run. So the naming in the code is related to the clock, so I don't have to worry about that, dear. As a beginner, javascript is very powerful.