前言

最近呢接手一個很古老的項目，就是沒有用任何Ui框架的那種，正好要開發(fā)一個氣泡彈出窗，心里一想是不是可以開發(fā)一個組件庫，然后直接使用既不是完美，于是就開始折騰，好在最終搞出來了。

先說一下用到的一個知識點就是extend方法
$.fn.methods({})是對jquery.prototype進行擴展，用法再demo中會體現(xiàn)出來

直接上菜：

第一步：css

/*!
 * author:郝艷峰
 * description:jquery彈起氣泡框組件css樣式
 * time:2022-01-27
 */
        .hoverDiv {
            position: absolute;
            background: #fff;
            display: none;
        }

        .hoverDiv:before {
            box-sizing: content-box;
            width: 0px;
            height: 0px;
            position: absolute;
            padding: 0;
            display: block;
            content: '';
            z-index: 12;
        }

        .hoverDiv:after {
            box-sizing: content-box;
            width: 0px;
            height: 0px;
            position: absolute;
            padding: 0;
            display: block;
            content: '';
            z-index: 10
        }

        .hoverDiv.top:before {
            bottom: -16px;
            left: 50%;
            margin-left: -6px;
            border-top: 8px solid #FFFFFF;
            border-bottom: 8px solid transparent;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
        }

        .hoverDiv.top:after {
            bottom: -18px;
            left: 49.9%;
            margin-left: -7px;
            border-top: 9px solid #cccccc;
            border-bottom: 9px solid transparent;
            border-left: 9px solid transparent;
            border-right: 9px solid transparent;
        }

        .hoverDiv.bottom:before {
            top: -16px;
            left: 50%;
            margin-left: -6px;
            border-bottom: 8px solid #FFFFFF;
            border-top: 8px solid transparent;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
        }

        .hoverDiv.bottom:after {
            top: -18px;
            left: 49.9%;
            margin-left: -7px;
            border-bottom: 9px solid #cccccc;
            border-top: 9px solid transparent;
            border-left: 9px solid transparent;
            border-right: 9px solid transparent;
        }

        .hoverDiv.left:before {
            top: 50%;
            right: -16px;
            margin-top: -6px;
            border-left: 8px solid #FFFFFF;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid transparent;
        }

        .hoverDiv.left:after {
            top: 50%;
            right: -18px;
            margin-top: -7px;
            border-left: 9px solid #cccccc;
            border-top: 9px solid transparent;
            border-bottom: 9px solid transparent;
            border-right: 9px solid transparent;
        }

        .hoverDiv.right:before {
            top: 50%;
            left: -16px;
            margin-top: -6px;
            border-right: 8px solid #FFFFFF;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 8px solid transparent;
        }

        .hoverDiv.right:after {
            top: 50%;
            left: -18px;
            margin-top: -7px;
            border-right: 9px solid #cccccc;
            border-top: 9px solid transparent;
            border-bottom: 9px solid transparent;
            border-left: 9px solid transparent;
        }

第二步：js

/*!
 * author:郝艷峰
 * description:jquery彈起氣泡框組件js
 * time:2022-01-27
 */
$(function () {
    $.fn.extend({
        hyfHover: function (hyfParams) {
            var parentContainer = $("<div class='parentDiv'></div>");
            this.wrap(parentContainer);
            const element = this.parent();
            for (let f = 0; f < element.length; f++) {
                element[f].addEventListener('mouseenter', function () {
                    var tipsContent = element[f].firstChild.getAttribute('tooltips');
                    var divSelf = $("<div class='hoverDiv'></div>");
                    divSelf.html(tipsContent == undefined ? hyfParams.content : tipsContent);
                    divSelf.css({
                        "width": !!hyfParams.width ? hyfParams.width : '',
                        "height": !!hyfParams.height ? hyfParams.height : '',
                        "color": !!hyfParams.selfColor ? hyfParams.selfColor : '#000',
                        "backgroundColor": !!hyfParams.selfBgColor ? hyfParams.selfBgColor : '#fff',
                        "box-shadow": !!hyfParams.selfShadow ? hyfParams.selfShadow : '0 0 9px 3px #ccc',
                    })
                    divSelf.appendTo(element[f])
                    let suspensionWidth = divSelf.appendTo(element[f]).width();
                    let suspensionHeight = divSelf.appendTo(element[f]).height();
                    switch (hyfParams.position) {
                        case 'top':
                            element[f].lastChild.classList.add("top");
                            element[f].lastChild.style.top = `${element[f].firstChild.offsetTop - suspensionHeight - 8}px`;
                            element[f].lastChild.style.left = `${element[f].firstChild.offsetLeft - (suspensionWidth/2) + (element[f].firstChild.offsetWidth / 2)}px`;
                            break;
                        case 'left':
                            element[f].lastChild.classList.add("left");
                            element[f].lastChild.style.left = `${element[f].firstChild.offsetLeft - suspensionWidth - 8}px`;
                            let hyfHeight = 10;
                            if (hyfParams.height > element[f].firstChild.offsetHeight) {
                                hyfHeight = `${element[f].firstChild.offsetTop - (hyfParams.height/2) + (element[f].firstChild.offsetHeight / 2)}`;
                            } else {
                                hyfHeight = `${element[f].firstChild.offsetTop + (element[f].firstChild.offsetHeight / 2) - 8}`;
                            }
                            element[f].lastChild.style.top = `${hyfHeight}px`;
                            break;
                        case 'bottom':
                            element[f].lastChild.classList.add("bottom");
                            element[f].lastChild.style.top = `${element[f].firstChild.offsetTop + element[f].firstChild.offsetHeight + 8}px`;
                            element[f].lastChild.style.left = `${element[f].firstChild.offsetLeft - (suspensionWidth/2) + (element[f].firstChild.offsetWidth / 2)}px`;
                            break;
                        case 'right':
                            element[f].lastChild.classList.add("right");
                            element[f].lastChild.style.left = `${element[f].firstChild.offsetLeft + element[f].firstChild.offsetWidth + 8}px`;
                            let hyfrightHeight = 10;
                            if (hyfParams.height > element[f].firstChild.offsetHeight) {
                                hyfrightHeight = `${element[f].firstChild.offsetTop - (hyfParams.height/2) + (element[f].firstChild.offsetHeight / 2)}`;
                            } else {
                                hyfrightHeight = `${element[f].firstChild.offsetTop + (element[f].firstChild.offsetHeight / 2) - 8}`;
                            }
                            element[f].lastChild.style.top = `${hyfrightHeight}px`;
                            break;
                    }
                    // firstChild代表$(".mouseHover")
                    // lastChild代表$(".hoverDiv")
                    element[f].lastChild.style.display = "block"
            
                })
                element[f].addEventListener('mouseleave', function () {
                    $(".parentDiv").find('.hoverDiv').remove();
                })
            }
        },

    })

});

第三步：index.html

一定要引入jquery,demo中hyfHover就是我暴露出來的方法

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>郝艷峰氣泡框組件</title>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Microsoft Yahei";
        }

        h1 {
            padding: 45px 0;
            font: 32px "Microsoft Yahei";
            text-align: center;
        }



        .self-html {
            color: #55b555;
            overflow-y: auto;
        }

        #tip5 {
            position: relative;
            border: 1px solid #55b555;
            margin-top: 200px;

        }

        .mouseHover {
            width: 100px;
            height: 30px;
            border: 1px solid red;
            cursor: pointer;
        }

        .parentDiv {
            display: inline-block;
        }
    </style>

</head>
<body>




    <div id="tip5">
        <p>好好說說拉開了將</p>

        <div class="mouseHover" tooltips="<div class='self-html'>這里是標簽內(nèi)的html這里是標簽內(nèi)的html這里是標簽內(nèi)的html--1</div>">1-四塊五的妞</div>
        <p>好好說說拉開了將</p>
        <div class="mouseHover">2-四塊五的妞</div>
        <p>好好說說拉開了將</p>

        <div style="margin-left: 239px;" class="mouseHover" tooltips="<div class='self-html'>這3</div>">3-四塊五的妞</div>
    </div>

    <script src="./js/jquery@1.8.3.js"></script>
    <script src="./js/index.js"></script>

    <script>
    這里就是使用方法
        $(function () {

            $('.mouseHover').hyfHover({
                position: "right",
                width: 200,
                height: 300,
                content: "這里是本草綱目",
                speed: 1000,
                selfShadow: '0 0 9px 3px #ccc',
                selfColor: "red",
            });


        });
    </script>
</body>

</html>

第四步：參數(shù)說明

結(jié)束語

奮戰(zhàn)了兩天終于開發(fā)完成，以后直接使用，方便了很多。