Home > Developer > Web Develop
Js + css3 achieve a pair of rotating eyes ------- Day68, css3 ------- day68
When I first thought about this small application, I took it for granted that it could be the same as a clock, as long as I get the rotation angle. Of course, I actually do the same, but there are some places in the middle that I did not think of, and then I learned a lot...
First, let's consider what we need to do if we want to achieve a pair of eyes that can follow the mouse rotation?
1. Draw a pair of eyes with a style. The amount is actually good for pictures;
2. Obtain the cursor position;
3. Determine the div deflection angle of the eye Based on the mouse position;
It is really easy to think about it. As long as the above three points are realized, I can get the desired goal. The first two are involved in the previous step, and the third point is a highlight of this time. In this way, we will record it step by step. First, we will use css to describe a pair of eyes to see the simple effect I have achieved:
Although it is a bit rough, it is not bad. Hey hey, let's take a look at the code writing.
Html section:
<body><div id="tip"></div><div id="back"><div id="leftEye"><div id="leftZhu"><div id="leftTong"></div></div></div><div id="rightEye"><div id="rightZhu"><div id="rightTong"></div></div></div></div> </body>CSS section:
<style type="text/css"> #back{position:absolute;width:400px;height:400px;left:50%;top:40%;margin-left:-200px;background:cyan;} #leftEye{width:100px;height:100px;margin-left:60px;margin-top:50px;background:#fff;border-radius:100px;border:10px solid #000;float:left;} #rightEye{width:100px;height:100px;margin-left:60px;margin-top:50px;background:#fff;border-radius:100px;border:10px solid #000;float:left;} #leftZhu{width:50px;height:50px;margin-left:20px;margin-top:40px;background:#000;border-radius:50px;} #rightZhu{width:50px;height:50px;margin-left:30px;margin-top:30px;background:#000;border-radius:50px;} #leftTong{clear:both;width:20px;height:20px;margin-top:10px;margin-left:5px;background:#fff;border-radius:20px; } #rightTong{clear:both;width:20px;height:20px;margin-top:10px;margin-left:5px;background:#fff;border-radius:20px;} #tip{width:100%;height:200px;} </style>In this way, one layer completes the implementation of the eyes, and then obtains the location of the mouse. This function was used to drag the div before: the event is to listen to the mouse onmouseover, the cursor position is event. clientX and event. clientY, so that the second requirement can be realized, and the third requirement is to find the rotation angle.
If we assume that the center of the page is the initial point (origin), we can get the angle of the point where the mouse is located, and set the origin point to (screen. availWidth/2, screen. availHeight/2), and the skew angle between two points can be obtained through Math. calculate the atan2 () function
<Script type = "text/javascript"> window. onload = function () {var eye = document. getElementById ("leftZhu"); var eye2 = document. getElementById ("rightZhu"); var tip = document. getElementById ("tip"); document. onmouseover = function (event) {var angle; var event = event | window. event; var disX = event. clientX; var disY = event. clientY; var pointX = disX-screen.availWidth/2; var pointY = disX-screen.availHeight/2; var aCir = Math. atan2 (p OintX, pointY); var pi = Math. PI; // converts radians to degrees pointX> 0? Angle = 90-aCir/pi * 180: angle = 270-aCir/pi * 180; tip. innerHTML = "current mouse position (" + disX + "," + disY + ")" + ", now the deflection radians are:" + aCir + ", the modern deflection angle is "+ angle; eye. style. transform = "rotate (" + angle + "deg)"; eye2.style. transform = "rotate (" + angle + "deg)" ;}}</script>Note that Math cannot be used here. atan (), Math. the atan () method contains a radian value in parentheses, because the tan function may have a very large value. On the other hand, due to the periodicity of the tan function, the information returned by this function is multiple, it is inconvenient to use this rule. In addition, 90 degrees and 270 degrees are meaningless, So we usually use Math. atan2 () so that we can get the requirement. The current position and information are displayed in the div of the tip.
In order to achieve this function, the trigonometric functions that we can look back are all forgotten. Actually, we can use them here ......
No js or css3. It seems that you only have the flash option mentioned above ..
There is also Microsoft's Silverlight. You can also say this. It was originally positioned as the flash killer, but it was not successful. There were too few plug-ins installed, and most people could not see it.
Learn about js and css. flash is also unreliable on mobile phones in the mobile age.
How does CSS3 or JS implement the Display Effect of the Windows 8 Metro menu?
Css3 animation transparency changes position change and size change
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
