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>
巴特西

banner 跟随鼠标呈现视差效果

最新文章

热门文章
