欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

模拟手指翻书的效果

程序员文章站 2024-02-25 22:05:27
...
<html>

<head>
    <meta charset="utf-8">

    <style>
        * {
            box-sizing: border-box;
        }
    </style>

</head>

<body style="padding:300px">
    <img id="img" src="1.png" style="width:200px;height:400px" alt="">
    <div id="mask" style="position:fixed;width:1000px;height:1000px;overflow: hidden;">
        <img id="im" src="1.jpg" style="position:fixed;width:200px;height:400px;display:none" alt="">
    </div>
    <script>
        var book = document.querySelector("#img");
        var obj = book.getBoundingClientRect();
        var rightX = obj.x + obj.width;
        var rightY = obj.y;
        var img = document.querySelector("#im");
        var mask = document.querySelector("#mask");
        var mousedown = false
        document.addEventListener("mousedown", function(e) {
            mousedown = true
        }, false)
        document.addEventListener("mouseup", function(e) {
            mousedown = false
        }, false)

        document.addEventListener("mousemove", function(e) {
            if (!mousedown) {
                return
            }
            if (window.timer) {
                return
            }
            window.timer = setTimeout(function() {
                var mouseX = e.clientX;
                var mouseY = e.clientY;
                var distance = Math.sqrt(Math.pow((rightY - mouseY), 2) + Math.pow((rightX - mouseX), 2)) / 2
                img.style.top = 500 + "px";
                img.style.left = 1000 - distance + "px";
                img.style.display = "block";
                img.style.transformOrigin = "left top";
                var deg = Math.atan((rightY - mouseY) / (rightX - mouseX)) * 180 / Math.PI
                img.style.transform = "rotate(" + deg + 45 + "deg)"
                mask.style.top = (mouseY - 500 + (rightY - mouseY) / 2) + "px";
                mask.style.left = (mouseX - 1000 + (rightX - mouseX) / 2) + "px";
                mask.style.transformOrigin = "right center";
                mask.style.transform = "rotate(" + deg + "deg)"
                console.log(deg)
                clearTimeout(window.timer)
                window.timer = false;
            }, 10)
        }, false)


        // var book = document.querySelector("#img");
        // var obj = book.getBoundingClientRect();
        // var rightX = obj.x + obj.width;
        // var rightY = obj.y;
        // var img = document.querySelector("#im");
        // var mask = document.querySelector("#mask");

        // document.addEventListener("mousemove", function(e) {
        //     if (window.timer) {
        //         return
        //     }
        //     window.timer = setTimeout(function() {
        //         var mouseX = e.clientX;
        //         var mouseY = e.clientY;

        //         img.style.top = (mouseY) + "px";
        //         img.style.left = mouseX + "px";
        //         img.style.display = "block";
        //         img.style.transformOrigin = "left top";

        //         var deg = 2 * Math.atan((rightY - mouseY) / (rightX - mouseX)) * 180 / Math.PI
        //         img.style.transform = "rotate(" + deg + "deg)"

        //         var deg1 = Math.atan((rightY - mouseY) / (rightX - mouseX)) * 180 / Math.PI
        //         var distance = Math.sqrt(Math.pow((rightY - mouseY), 2) + Math.pow((rightX - mouseX), 2)) / 2

        //         console.log(distance)
        //         mask.style.top = (mouseY - 500) + "px";
        //         mask.style.left = (mouseX - 1000 + distance) + "px";
        //         mask.style.transformOrigin = "right center";
        //         mask.style.transform = "rotate(" + deg1 + "deg)"
        //         clearTimeout(window.timer)
        //         window.timer = false;
        //     }, 16)
        // }, false)
    </script>
</body>


</html>