个人第一个jquery插件（tips）

Posted 2020-08-13

js代码

/**
 * Created by joesbell on 2016/10/8.
 */
;(function($) {
    var defaults = {
        background:"#000",//tips的背景颜色
        color:"white",
        position:"r",//出现的位置 l--左边， r--右边  t--顶部  b--底部
        parWidth:"",//父级元素的宽度
        parHeight:"",//父级元素的高度
        tipsJ:"10px",//tips的距离父级距离偏移量
        tipsP:"20px",//tips的居中位置偏移量
        padding:"10px",//文字提示内边距
        txt:"helloWorld",//文字
        IconPos:"10px",//小箭头居中位置偏移量
        speed:"200",//tips出现的速度延迟
    };
    function se(){
        setTimeout(function () {
            $(".tip_JS").remove();
        },200)
    };

    $.fn.JSTips= function(options) {
        var options = $.extend({}, defaults, options);

        return this.each(function() {
            var parentWidth=$(this).width();
            var parentHeight=$(this).height();
            options.parWidth=parentWidth;
            options.parHeight=parentHeight;
//                $(this).append(joesO(options));
            $(this).on("mouseenter",function () {
                $(this).append(joesTips(options));
            });
            $(this).on("mouseleave",function () {
                se();
            })
        });
    };
    function joesTips(opts) {
        var layEle=$("<div class=‘tip_JS‘></div>");
        var layE=$("<div class=‘txt_JS‘></div>");
        var cs=$("<i></i>");
        var pe=$("<p class=‘tipTxt_JS‘></p>")
        var tipsP=parseInt(opts.tipsP);
        var tipsJ=parseInt(opts.tipsJ);
        var PW=opts.parWidth;
        var PH=opts.parHeight;
        var position=opts.position;
        var bg=opts.background;
        var pd=parseInt(opts.padding);
        var txt=opts.txt;
        var IconPos=opts.IconPos;
        var speed=parseInt(opts.speed);
        var color=opts.color;
        pe.appendTo(layE).css({
            padding:pd,
        });
        pe.html(txt);
        layE.appendTo(layEle);
        $(".test:after").css({
            "border-color":bg
        });
//            tips出现在右边
        if(position=="r"){
            layEle.css({
                background:bg,
                left:PW+tipsJ,
                top:tipsP,
                color:color
            }).show(speed);
            cs.addClass("triangle-left").css({
                top:IconPos,
                "border-right-color":bg
            }).appendTo(layE);
        }else if(position=="l"){
            //            tips出现在左边
            layEle.css({
                background:bg,
                right:PW+tipsJ,
                top:tipsP,
                color:color
            }).show(speed);
            cs.addClass("triangle-right").css({
                top:IconPos,
                "border-left-color":bg
            }).appendTo(layE);

        }else if(position=="b"){
            layEle.css({
                background:bg,
                top:PH+tipsJ,
                left:tipsP,
                color:color
            }).show(speed);
            cs.addClass("triangle-up").css({
                left:IconPos,
                "border-bottom-color":bg
            }).appendTo(layE);
            //            tips出现在底部

        }else if(position=="t"){
            //            tips出现在顶部
            layEle.css({
                background:bg,
                bottom:PH+tipsJ,
                left:tipsP,
                color:color
            }).show(speed);
            cs.addClass("triangle-down").css({
                left:IconPos,
                "border-top-color":bg
            }).appendTo(layE);

        }
        return layEle
    }
})(jQuery);

css代码

/*上箭头*/
.triangle-up {
    position: absolute;
    width:0;
    height:0;
    bottom: 100%;
    border:10px solid transparent;
    border-bottom-color:yellow;
}
/*下箭头*/
.triangle-down {
    position: absolute;
    width:0;
    height:0;
    top:100%;
    /*transform: translate(-50%,-50%);*/
    border:10px solid transparent;
    border-top-color:yellow;
}
/*左箭头*/
.triangle-left {
    position: absolute;
    width:0;
    height:0;
    right: 100%;
    border:10px solid transparent;
    border-right-color:yellow;
}
/*右箭头*/
.triangle-right {
    position: absolute;
    width:0;
    height:0;
    left: 100%;
    margin: auto;
    /*transform: translate(-50%,0);*/
    border:10px solid transparent;
    border-left-color:yellow;
}
.tip_JS{
    position: absolute;
    display: none;
    width: auto;
}
.txt_JS{
    position: relative;
}
.tipTxt_JS{
    white-space: nowrap;
}

测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .p{
            position: relative;
            width: 500px;
            height: 500px;
            background: #000;
            margin: 0 auto;
            margin-top: 200px;
        }
    </style>
    <link rel="stylesheet" href="./Tips/myTips.css">
</head>
<body>
<div class="p">
    <p style="color: wheat">我的第一个tips插件</p>
</div>
</body>
<script src="jquery-1.12.2.min.js"></script>
<script src="./Tips/myTips.js"></script>
<script>


    $(".p").JSTips({
//        background:"rgba(0,0,0,0.5)",
//        position:"l",
//        tipsP:"150px",
//        txt:"helloWorld",
//        IconPos:"10px",
//        speed:"200",
    });
</script>
</html>