眼睛随鼠标来回转动

程序员文章站 2023-12-25 18:30:51
...
效果图
眼睛随鼠标来回转动
实现代码
<!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>