banner 跟随鼠标呈现视差效果

参考 Element 官网，利用 js / jq 和 css3， 实现某图片随着鼠标移动呈现的视差效果。

---

<!DOCTYPE html>
<html>

<head>
    <title>banner 跟随鼠标呈现视差效果</title>
    <meta charset="utf-8" />
    <style>
        * {
            transition: all .3s;
        }

        .perspective {
            perspective: 800px;
        }

        .preserve3d {
            position: relative;
            width: 500px;
            height: 400px;
            margin: 160px auto;
            background: #4b5cce url("http://data.banyanbbt.org/static/newimg/top/right.png") center no-repeat;
            background-size: 100% 100%;
            border-radius: 20px;
            transform-style: preserve-3d;
        }
    </style>
</head>

<body>
    <div class="perspective">
        <div class="preserve3d">
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript">

        /* 原生js实现 */

        (function () {
            var imgPX = 0;
            var imgPY = 0;
            var divWidth = 0;
            var divHeight = 0;
            var flag = false; // 记录鼠标是否按下

            var preserve3d = document.querySelector(".preserve3d");

            console.log(preserve3d.offsetLeft, preserve3d.offsetTop)
            console.log(preserve3d.clientWidth, preserve3d.clientHeight)

            preserve3d.addEventListener("mouseenter", function (e) {
                flag = true;
                var evt = e || window.event;
                imgPX = preserve3d.offsetLeft;
                imgPY = preserve3d.offsetTop;
                divWidth = preserve3d.clientWidth;
                divHeight = preserve3d.clientHeight;

                document.addEventListener("mousemove", function (e) {
                    if (flag) {
                        var evt = e || window.event;
                        var mouseX = evt.clientX - imgPX;
                        var mouseY = evt.clientY - imgPY;
                        var X = mouseX - divWidth / 2;
                        var Y = divHeight / 2 - mouseY;
                        preserve3d.style.transform =
                            `rotateY(${ X / 20 }deg) rotateX(${ Y / 20 }deg)`
                    }
                });

                document.addEventListener("mouseout", function () {
                    flag = false;
                    preserve3d.style.transform = `rotateY(${ 0 }deg) rotateX(${ 0 }deg)`
                    document.removeEventListener("mouseout", function () {
                        flag = false;
                    });
                })

            });
        })();

        /* jq 实现 */

        // (function () {
        //     var imgPX = 0;
        //     var imgPY = 0;
        //     var divWidth = 0;
        //     var divHeight = 0;

        //     $('.preserve3d').on('mouseenter', function () {
        //         imgPX = $(this).offset().left;
        //         imgPY = $(this).offset().top;
        //         divWidth = $(this).outerWidth();
        //         divHeight = $(this).outerHeight();

        //         console.log($(this).offset().left, $(this).offset().top)

        //     }).on('mousemove', function (event) {
        //         var mouseX = event.pageX - imgPX;
        //         var mouseY = event.pageY - imgPY;
        //         var X = mouseX - divWidth / 2;
        //         var Y = divHeight / 2 - mouseY;
        //         $(this).css({
        //             "transform": "rotateY(" + X / 20 + "deg) " + "rotateX(" + Y / 20 + "deg) "
        //         });
        //     }).on('mouseleave', function () {
        //         $(this).css({
        //             "transform": "rotateY(0deg) rotateX(0deg)"
        //         })
        //     })
        // })();
    </script>
</body>

</html>