效果圖
實現代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.luban{
width: 145px;
height: 250px;
position: relative;
overflow: hidden;
margin: 10% auto;
}
.luban img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
* {
margin: 0;
padding: 0;
}
div#wrapper {
width: 100%;
height: 1500px;
background-color: #eee;
text-align: center;
}
div.face {
position: relative;
top: 20%;
margin-left: 0px;
margin-right: 0px;
width: 200px;
height: 250px;
display: inline-block;
overflow: hidden;
background-color: #2db5ae;
border-radius: 45% 45% 0 0;
}
div.eyes {
position: relative;
top: 70px;
width: 100%;
height: 80px;
background-color: #2db5ae;
}
div.eye-left {
position: absolute;
left: 10%;
overflow: hidden;
width: 35%;
height: 100%;
background-color: white;
border-radius: 45% 45% 55% 55%;
}
div.eye-right {
position: absolute;
right: 10%;
overflow: hidden;
width: 35%;
height: 100%;
background-color: white;
border-radius: 45% 45% 55% 55%;
}
div.eye-in {
position: relative;
display: inline-block;
width: 45%;
height: 55%;
margin-right: 0;
margin-left: 0;
margin-top: 20px;
background-color: black;
border-radius: 50% 50%;
}
div.nose {
position: relative;
top: 32%;
text-align: center;
}
div.nose a {
display: inline-block;
background-color: white;
height: 10px;
width: 10px;
border-radius: 5px;
}
div.mouth {
position: relative;
top: 90px;
width: 100%;
height: 25%;
display: inline-block;
overflow: hidden;
text-align: center;
background-color: #614030;
border-radius: 81% 5% 81% 5%;
}
div.tooth {
position: relative;
height: 50px;
width: 35px;
display: inline-block;
margin-left: -7px;
background-color: white;
border-radius: 0 0 50% 50%;
}
div #tooth1 {
top: 0px;
}
div #tooth2 {
top: -5px;
}
div #tooth3 {
top: -10px;
}
div #tooth4 {
top: -15px;
}
</style>
</head>
<body>
<!-- <div class="luban">
<img src="./t016c1a38416b5e6a2a.gif" alt="">
</div> -->
<div id="wrapper">
<div class="face" id="blue">
<div class="eyes">
<div class="eye-left">
<div class="eye-in"></div>
</div>
<div class="eye-right">
<div class="eye-in"></div>
</div>
</div>
<div class="nose">
<a></a>
<a></a>
</div>
<div class="mouth">
<div class="tooth" id="tooth1"></div>
<div class="tooth" id="tooth2"></div>
<div class="tooth" id="tooth3"></div>
<div class="tooth" id="tooth4"></div>
</div>
</div>
</div>
<script>
window.onload = function () {
// first Step
// 動態語言直接 var eyes = document.querySelectorAll(".eye-in");
var eyes = [];
eyes = document.querySelectorAll(".eye-in");
// second Step 爲元素添加事件處理
document.onmousemove = function (event) {
var mouseLeft = event.clientX,
mouseTop = event.clientY;
// console.log(getViewportSize().height);
throttle(function () {
$forEach(eyes, function (o, i) {
var chaX = mouseLeft - getOffset(eyes[i]).left;
var chaY = mouseTop - getOffset(eyes[i]).top;
var viewportWidth = getViewportSize().width / 2;
var viewportHeight = getViewportSize().height / 2;
//mouseLeft 與 mouseTop的值有時候太小，導致差值太小
eyes[i].style.left = ((chaX / viewportWidth) * 50) + "%";
eyes[i].style.top = ((chaY / viewportHeight) * 50) + "%";
})
}
)
}
// 要用到的函數
function throttle(method, context) {
clearTimeout(method.tId);
method.tId = setTimeout(function () {
method.call(context);
}, 70);
}
function $forEach(arr, callback, thisp) {
if (arr.forEach) {
arr.forEach(callback, thisp);
} else {
for (var i = 0, len = arr.length; i < len; i++) {
callback.call(thisp, arr[i], i, arr);
}
}
}
// 單位
function getOffset(element) {
var actualLeft = element.offsetLeft;
var actualTop = element.offsetTop;
// var actualTop = element.offsetWidth / 2;
// var actualLeft = element.offsetHeight /2;
var current = element.offsetParent;
while (current !== null) {
actualTop += current.offsetTop;
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return { left: actualLeft, top: actualTop };
}
function getViewportSize() {
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
// console.log(pageWidth);
return { width: pageWidth, height: pageHeight }
}
}
</script>
</body>
</html>