【JS】jQuery实现鼠标跟随

效果图-为动图

HTML

<div class="box">
        <p>
            <img src="../images/1.jpeg" alt="">
        </p>
        <p>
            <img src="../images/2.jpeg" alt="">
        </p>
        <p>
            <img src="../images/3.jpeg" alt="">
        </p>
    </div>

    <div class="show">
        <img src="../images/1.jpeg" alt="">
    </div>

CSS

<style>
        * {
            margin: 0;
            padding: 0;
        }

        div.box {
            width: 600px;
            height: 200px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            border: 5px solid pink;
            margin: 50px auto;
            cursor: pointer;
        }

        div>p {
            width: 100px;
            height: 100px;
        }

        div>p>img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .show {
            width: 288px;
            height: 180px;
            position: absolute;
            left: 0;
            top: 0;

            display: none;

            pointer-events: none;
        }
    </style>

JS-需要先引入jQuery文件

可前往jQuery官网下载：jQuery官网

<script src="../js/jquery-2.2.4.js"></script>


<script>
    //绑定鼠标移入事件
    $(".box p").mouseover(function () {
        //获取当前图片的 src
        let src = $(this).find('img').prop('src');
        //将当前图片的src赋值给大图的src 并出现
        $('.show img').prop('src', src);
        $('.show').stop().fadeIn(100);
    })
    //绑定鼠标移出事件
    $('.box p').mouseout(function () {
        $('.show').stop().fadeOut(100);
    })
    //绑定鼠标移动事件
    $('.box p').mousemove(function (e) {
        $('.show').css({ left: e.pageX, top: e.pageY })
    })
</script>