• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

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

武飞扬头像
Luke
帮助1424

<!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>

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanefba
系列文章
更多 icon
同类精品
更多 icon
继续加载