首页手记 pc端提示文字小插件（含碰撞检测）

pc端提示文字小插件（含碰撞检测）

标签：

JQuery JavaScript

**需要自己引入jquery，实现效果如图所示**

在做这个插件的时候，因为设置的可以自定义padding，所以我使用了box-sizing:border-box属性，此时出现一个问题——碰撞检测失灵，出现小部分叠加。然后就发现jquery的height()方法获得的是不包括padding高度的height，而css("height")方法可以获得包括padding高度的height。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../jquery/jquery.min.js"></script>
        <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="tipBar.js"></script>
        <style>
            body{
                width: 100%;height:100%;position: absolute;bottom: 0;left:0;background:#AEC5E6;overflow: hidden;
            }       
            .from_top,.from_bottom,.from_now{
                width: 200px;height:50px;line-height: 50px;background:#0066CC;color:#F8FFFF;border:none;

            }
            .button_box{
                position: absolute;top:0;bottom:0;
            }
        </style>
        <script>
            $(document).ready(function(){

                $(".from_top").bind("click",function(){
                    var tipBarNode1=new tipBar();
                    tipBarNode1.value("我是提示框1,我从上面来的").txtColor("#ff0000").timer("10000").bgColor("rgba(255,0,0,0.5)").txtColor("#ffffff");
                    tipBarNode1.boxDownShow("300px");
                })
                $(".from_bottom").bind("click",function(){
                    var tipBarNode2=new tipBar();
                    tipBarNode2.setConfig({"value":"我是提示框2，我从下面来的","timer":"5000","bgColor":"rgba(112,112,112,0.5)","boxHeight":"50px","lineHeight":"50px"});
                    tipBarNode2.boxUpShow("250px");
                })
                $(".from_now").bind("click",function(){
                    var tipBarNode3=new tipBar({"value":"我是提示框3,我原地跳出来的。我是提示框3,我原地跳出来的","timer":"3000","bgColor":"rgba(0,0,122,0.5)","boxPadding":"10px 30px","txtColor":"#ffffff","boxHeight":"80px","lineHeight":"30px"});
                    tipBarNode3.setConfig();
                    tipBarNode3.boxShow("500px");
                })
            });

        </script>       

    </head>
    <body>
        <div class="tip_wrap"></div>
        <div class="button_box">
            <button class="from_top">从上面进来</button>
            <button class="from_bottom">从下面进来</button>          
            <button class="from_now">直接出来</button>          
        </div>
    </body>

</html>

function tipBar(){
    var tipNum=0;
    var content=this;
    var node=this.node=$('<div class="tip_box"></div>');
    var tipCloseBtn=$('<div class="tip_close">X</div>');
    var tipText=$('<div class="tip_text"></div>');
    var posTop=0;
    var posBottom=0;
    var topY=0;
    var bottomY=0;
    var scrnWidth=0;
    var boxHalfWidth=0;
    var positionVal=0;
    var nodeParent=null;
    var tipNodeHeight=0;
    var windowHeight=document.documentElement.clientHeight;
    node.append(tipCloseBtn.get(0));
    node.append(tipText.get(0));
    tipCloseBtn.css({
        lineHeight:"20px",
        width:"20px",
        height:"20px",
        textAlign:"center",
        margin:"5px",
        position:"absolute",
        top:"50%",
        right:"0",
        marginTop:"-10px",
        cursor:"pointer",
        background:"rgba(112,112,112,0.5)",
        borderRadius:"50%",
        color:"#e5e5e5"
    })
    //参数数组
    var arg=Array.prototype.slice.call(arguments);  

    //var 默认配置
    var defaultConfig={
        value:"提示文字",
        timer:"20000",
        boxWidth:"300px",
        boxHeight:"70px",
        boxRadius:"5px",
        txtColor:"#222222",
        txtSize:"14px",
        bgColor:"rgba(112,112,112,0.3)",
        boxPadding:"0 20px 0 0",
        textAlign:"center",
        lineHeight:"70px",
        boxDisplay:"none",
        zIndex:"999999",
        opacity:"0",
        boxSizing:"border-box"
    };  
    //配置函数(会根据用户传的参数和defaultConfig合并生成用户配置对象)
    var config= $.extend(defaultConfig,arg[0]);
    //添加到页面
    this.appendTo=function(_jq){
        nodeParent=_jq;
        $(_jq).append(this.node.get(0));
        topY=document.documentElement.clientHeight;
        node.css({display:config.boxDisplay,
            width:config.boxWidth,
            height:config.boxHeight,
            background:config.bgColor,
            borderRadius:config.boxRadius,
            color:config.txtColor,
            fontSize:config.txtSize,
            padding:config.boxPadding,
            textAlign:config.textAlign,
            lineHeight:config.lineHeight,
            zIndex:config.zIndex,
            boxOpacity:config.boxOpacity,
            boxSizing:config.boxSizing
        });
    };

    //碰撞检测
    this.contactTest=function(_value){
        tipNum=$(".tip_box").length;
        for(var i=0;tipNum && i<tipNum-1;i++){
            posTop=$(".tip_box").eq(i).position().top;
            posBottom=posTop+parseInt($(".tip_box").eq(i).css("height"));
            topY=(topY>=posTop)?posTop:topY;
            bottomY=(bottomY<=posBottom)?posBottom:bottomY;
        }
        tipNodeHeight=parseInt(node.css("height"))+1;
        if(topY<=parseInt(_value)+1){//超过上边界
            if(topY>tipNodeHeight){
                positionVal=topY-tipNodeHeight;
            }else{
                positionVal=bottomY+1;
            }
        }else if((parseInt(_value)+1)<=bottomY-tipNodeHeight){//超过下边界
            if($(nodeParent).height()-bottomY>parseInt(_value)+1){
                positionVal=bottomY+1;
            }else{
                positionVal=topY-tipNodeHeight;
            }
        }else{//没有超出边界
            positionVal=_value;
        }
        return positionVal;
    }

    //设置从上面下来显示
    this.boxDownShow=function(_value){
        content.contactTest(_value);
        node.show();
        scrnWidth=document.body.offsetWidth/2+"px";
        boxHalfWidth=-parseInt(config.boxWidth)/2+"px";
        node.css({position:"absolute",top:0,left:scrnWidth,marginLeft:boxHalfWidth});
        node.animate({top:positionVal},50);
        content.timer();
        return this;
    }
    //设置从下面上来显示
    this.boxUpShow=function(_value){
        content.contactTest(_value);    
        node.show();
        scrnWidth=document.body.offsetWidth/2+"px";
        boxHalfWidth=-parseInt(config.boxWidth)/2+"px";
        node.css({position:"absolute",top:$(nodeParent).height(),left:scrnWidth,marginLeft:boxHalfWidth});      
        node.animate({top:positionVal},50);     
        content.timer();
        return this;
    }   
    //设置显示
    this.boxShow=function(_value){      
        content.contactTest(_value);
        node.show();
        scrnWidth=document.body.offsetWidth/2+"px";
        boxHalfWidth=-parseInt(config.boxWidth)/2+"px";     
        node.css({position:"absolute",top:positionVal,left:scrnWidth,marginLeft:boxHalfWidth}); 
        node.fadeIn();
        content.timer();
        return this;
    }    
    //设置隐藏
    this.boxHide=function(){
        node.fadeOut(); 
        return this;
    }
    //设置透明度
    this.boxOpacity=function(_value){
        if(_value){
            node.css({opacity:_value});
            return this;
        }else{
            return config.boxOpacity;
        }
    }   
    //设置提示时间
    this.timer=function(_value){
        clearTimeout(timeNode);
        if(_value){
            var timeNode=setTimeout(function(){
                node.fadeOut(300,function(){
                    node.remove();
                });             
                content=null;
            },_value);
            return this;
        }else{
            return config.timer;
        }
    }

    //设置优先级
    this.zIndex=function(_value){
        if(_value){
            node.css({zIndex:_value});
            return this;
        }else{
            return config.zIndex;
        }
    }
    //设置提示文字
    this.value=function(_value){
        if(_value){
            node.find(".tip_text").text(_value);
            return this;
        }else{
            return config.value;
        }
    }
    //设置外层盒子宽度
    this.boxWidth=function(_value){
        if(_value){
            node.css({width:_value});
            return this;
        }else{
            return config.boxWidth;
        }
    }    
    //设置外层盒子高度
    this.boxHeight=function(_value){
        if(_value){
            node.css({height:_value});
            return this;
        }else{
            return config.boxHeight;
        }
    }    
    //设置外层盒子圆角弧度
    this.boxRadius=function(_value){
        if(_value){
            node.css({borderRadius:_value});
            return this;
        }else{
            return config.boxRadius;
        }
    }        
    //设置背景颜色
    this.bgColor=function(_value){
        if(_value){
            node.css({background:_value});
            return this;
        }else{
            return config.bgColor;
        }
    }    
    //设置字体大小
    this.txtSize=function(_value){
        if(_value){
            node.css({fontSize:_value});
            return this;
        }else{
            return config.txtSize;
        }       
    }    
    //设置字体颜色
    this.txtColor=function(_value){
        if(_value){
            node.css({color:_value});
            return this;
        }else{
            return config.txtColor;
        }               
    }    
    //设置最外层padding
    this.boxPadding=function(_value){
        if(_value){
            node.css({padding:_value});
            return this;
        }else{
            return config.boxPadding;
        }               
    }    
    //设置字体居中
    this.textAlign=function(_value){
        if(_value){
            node.css({textAlign:_value});
            return this;
        }else{
            return config.textAlign;
        }               
    }    
    //设置字体行高
    this.lineHeight=function(_value){
        if(_value){
            node.find(".tip_text").css({lineHeight:_value});
            return this;
        }else{
            return config.lineHeight;
        }                       
    }    
    //初始化
    this.setConfig=function(_config){
        content.appendTo("body");
        config=$.extend(config,_config);
        content.value(config.value);
        content.timer(config.timer);
        content.zIndex(config.zIndex);
        content.boxWidth(config.boxWidth);
        content.boxHeight(config.boxHeight);
        content.boxRadius(config.boxRadius);
        content.bgColor(config.bgColor);
        content.txtColor(config.txtColor);
        content.txtSize(config.txtSize);
        content.boxPadding(config.boxPadding);
        content.textAlign(config.textAlign);
        content.lineHeight(config.lineHeight);  
        content.boxOpacity(config.boxOpacity);      
    };
    this.setConfig.apply(this,arg);

    //点击关闭提示框
    this.node.find(".tip_close").bind("click",function(){
        node.remove();
        content=null;
    })
}

点击查看更多内容