**需要自己引入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" src="../../jquery/jquery.min.js"></script>
<script type="text/javascript" src="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;
})
}
随时随地看视频
