学新通博客

HTML+JS+CSS实现鼠标滑动出现悬浮框

原创 488 124

本文出至:学新通博客

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title Page</title>
        <style>
            .page-index-content-4-all-list {
                width: 17.9rem;
                height: 10.9rem;
                background-color: #fbe5e5;
                border-radius: 0.313rem;
                position: relative;
                display: inline-block;
                margin-right: 0.5rem;
                margin-bottom: 0.5rem;
            }
            .page-index-content-4-all-list:last-child,
            .page-index-content-4-all-list:nth-child(4n+0) {
                margin-right: 0;
            }
            .page-index-content-4-all-list>img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 0.313rem;
            }
            .page-index-content-4-all-list-font {
                position: absolute;
                z-index: 2;
                top: 0;
                left: 0;
                min-width: 4rem;
                height: auto;
                line-height: 1;
                background-color: rgb(0 0 0 / 50%);
                padding: 0.313rem;
                display: none;
            }
            .page-index-content-4-all-list>.page-index-content-4-all-list-font>span {
                font-size: 0.75rem;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0rem;
                color: #ffffff;
                cursor: pointer;
                display: block;
            }
            .page-index-content-4-all-list:hover .page-index-content-4-all-list-font {
                display: block;
            }
            .page-index-content-4-all-list>.page-index-content-4-all-list-font-all>span {
                font-size: 1.125rem;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0rem;
                color: #ffffff;
                width: 7.375rem;
                height: 3.5rem;
                border: solid 0.125rem #ffffff;
                display: inline-block;
                margin-top: 25%;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div>
            <a href="/video/rfbkgbcgcae" target="_blank" data-id="15247"
                data-pid="9">
                <img src="//img3.rfstock.com/thumbs/6024192/175125204/thumb_600.jpg" alt="">
                <div active="2">
                    <span>珠海市航全景</span>
                </div>
            </a>
        </div>
    </body>
    <script>
        // 鼠标跟随DIV
        var indexMove = true;
        var listX, listY, pageOffset;
        $('.page-index-content-4-all-list').hover(function(){
            $('.page-index-content-4-all-list').mousemove(function(e){ // mousemove
                clearInterval(pageOffset);
                let offset = $(this).offset();
                let x = e.pageX - offset.left + 5;
                let y = e.pageY - offset.top + 20;
                pageOffset = setInterval(() => {
                    if ($(this).find('.page-index-content-4-all-list-font').attr('active') == 2 && indexMove) {
                        $(this).find('.page-index-content-4-all-list-font').css({
                            "left": x, "top": y
                        }).show().attr('active', 1);
                    }
                }, 100);
            });
        }, function(){
            clearInterval(pageOffset);
            $('.page-index-content-4-all-list').find('.page-index-content-4-all-list-font').css({
                 "left": 0, "top": 0
            }).hide().attr('active', 2);
        });
    </script>
</html>


本文出至:学新通博客

标签:

上一篇:澳网法网法网发

下一篇: