“紧跟着的眼睛”示例的 HTML

最新推荐文章于 2024-05-07 07:53:49 发布

黄宝康

最新推荐文章于 2024-05-07 07:53:49 发布

阅读量888

点赞数

分类专栏： javascript 文章标签：紧跟着眼睛的HTML

本文链接：https://blog.csdn.net/huangbaokang/article/details/80527770

版权

javascript 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
 <title>Mouse Movements</title>
 <link rel="stylesheet" href="script06.css">
 <script src="script06.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>

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: 100px;
}
#rEye {
 left: 150px;
}
#lDot {
 left: 118px;
}
#rDot {
 left: 153px;
}

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";
 }
}

专业墙纸贴纸厨房用具装饰出售，本人网店经营

博客对你有用记得访问下哦，增加下访问量，如有需要可以下单购买哦^_^。https://item.taobao.com/item.htm?id=570637716145

黄宝康

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
“紧跟着的眼睛”示例的 HTML

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;Mouse Movements&lt;/title&gt; &lt;link rel="stylesheet" href="script06.css"&gt; &lt;script src="script06.js"&a
复制链接

扫一扫