紧跟着的眼睛的javascript实现

素颜马尾好姑娘i 2022-07-14 09:50 143阅读 0赞

首先介绍一下onmousemove事件，当页面的访问者移动鼠标时，就会触发onmousemove事件。在本例中，我们让用户觉得有一双眼睛一直盯着他们的鼠标移动。  
![鼠标在两只眼睛的中间下方][20161206101411112]  
“紧跟着的眼睛”实例的HTML

<!DOCTYPE html>
    <html>
    <head>
        <title>Mouse Movements</title>
        <link rel="stylesheet" href="script04.css">
        <script src="script04.js"></script>
    </head>
    <body>
        <img src="images/circle.gif" alt="left eye" id="lEye">
        <img src="images/circle.gif" alt="right eye" id="rEye">
        <img src="images/lilRed.gif" alt="left eyeball" id="lDot">
        <img src="images/lilRed.gif" alt="right eyeball" id="rDot">
    </body>
    </html>```
    “紧跟着的眼睛”实例的CSS

body \{  
background-color: \#FFF;  
\}

# lEye, \#rEye \{ #

position: absolute;
    top: 100px;
    width: 24px;
    height: 25px;

# lDot, \#rDot \{ #

position: absolute;
    top: 113px;
    width: 4px;
    height: 4px;

# lEye \{ #

left: 150px;

# rEye \{ #

left: 200px;

# lDot \{ #

left: 118px;

# rDot \{ #

left: 153px;

“紧跟着的眼睛”实例的JS

document.onmousemove = moveHandler;

function moveHandler(evt) \{  
if (!evt) \{  
evt = window.event;  
\}  
animateEyes(evt.clientX, evt.clientY);  
\}

function animateEyes(xPos,yPos) \{  
var rightEye = document.getElementById(“rEye”);  
var leftEye = document.getElementById(“lEye”);  
var rightEyeball = document.getElementById(“rDot”).style;  
var leftEyeball = document.getElementById(“lDot”).style;

leftEyeball.left = newEyeballPos(xPos, leftEye.offsetLeft);
    leftEyeball.top = newEyeballPos(yPos, leftEye.offsetTop);
    rightEyeball.left = newEyeballPos(xPos, rightEye.offsetLeft);
    rightEyeball.top = newEyeballPos(yPos, rightEye.offsetTop);
    
    function newEyeballPos(currPos,eyePos) {
        return Math.min(Math.max(currPos,eyePos+3), eyePos+17) + "px";
    }

“\`  
重点需要理解的是CSS文件中的style，特别是对于布局，可以在草纸上计算一下相关的像素点的大小，以帮助理解。

[20161206101411112]: /images/20220714/96649821a0da4e4ca24b6d4646474900.png