一个可以控制提示框显示为top,bottom,left,right的小方法
html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>提示框</title>
<script src="../jquery-1.10.2.min.js" type="text/javascript" charset="utf-8" ></script>
<script src="tip.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="tip.css">
<style type="text/css" media="screen">
.box,.box1,.box3,.box4 {width: 100px;height:20px;text-align: center;color: #000;border:1px solid #dcdcdc;}
.box1{margin:0 auto;}
.box2{width: 50px;height: 20px;text-align: center;color: #000;border:1px solid #000;position: absolute;right:200px;top:200px;overflow: hidden;}
.box3 {margin-top: 200px;}
.box4 {position: absolute;right:0px;top:300px;}
</style>
<script type="text/javascript" charset="utf-8">
$(function(){
$(".box").m_tip(".m_tip",true);
$(".box1").m_tip(".m_tip",false);
$(".box2").m_tip(".m_tip",false);
$(".box3").m_tip(".m_tip",false);
$(".box4").m_tip(".m_tip",false);
})
</script>
</head>
<body>
<div class="box" data-direction="bottom">提示框移动</div>
<div class="box1" data-direction="left">提示框移动</div>
<div class="box2" data-direction="left">提示框移动</div>
<div class="box3" data-direction="right">提示框移动</div>
<div class="box4" data-direction="left">提示框移动</div><div class="m_tip"> <div class="m_tip_bottom" data-border="6"></div> <span>文字文字</span></div></body></html>
css代码
*{margin:0px;padding:0px;}
.m_tip {
background: #555556 none repeat scroll 0 0;
color: #fff;
font-size: 12px;
min-height: 20px;
line-height: 20px;
position: absolute;
text-align: center;
min-width: 45px;
display: none;
padding:4px;
z-index: 1000;
}
.m_tip_bottom {
border-left: 6px solid #fff;
height: 0;
line-height: 0;
position: absolute;
width: 0;
}
js代码
$(function(){
//target表示提示框的class tag的取值为true or false 用来表示是否显示提示框的边框圆角
$.fn.m_tip = function(target,tag){
var that = $(this);
that.hover(function(){
var border = parseInt($(target).find(".m_tip_bottom").attr("data-border"));
var b_w=that.outerWidth();
var b_h=that.outerHeight();
var t_w=$(target).outerWidth();
var t_h=$(target).outerHeight();
var o_L=that.offset().left;
var o_T=that.offset().top;
var m_L=that.offset().left + (b_w - t_w) / 2;
var m_T=that.offset().top - b_h - border -3;
//判断是否显示边框圆角
if( tag ) {
$(target).css("border-radius",'3px');
} else {
$(target).css("border-radius",'0px');
}
// 判断提示框显示的方向
//
if( that.attr("data-direction") == 'bottom') {
$(target).find(".m_tip_bottom").css({
'border-bottom' : "6px solid #555556",
'border-top' : '0px',
'border-left' : '6px solid #fff',
'border-right' : '6px solid #fff',
'top': -border,
'left': t_w / 2 -border
})
$(target).css({
top: o_T + t_h,
left: m_L
})
} else if( that.attr("data-direction") == 'top' ) {
$(target).find(".m_tip_bottom").css({
'border-top' : "6px solid #555556",
'border-bottom' : '0px',
'border-left' : '6px solid #fff',
'border-right' : '6px solid #fff',
'left' : t_w / 2 -border,
'top' : t_h
})
$(target).css({
left:m_L,
top:m_T
})
} else if( that.attr("data-direction") == 'right' ) {
$(target).find(".m_tip_bottom").css({
'border-top' : "6px solid #fff",
'border-bottom' : '6px solid #fff',
'border-left' : '0px',
'border-right' : '6px solid #555556',
'left' : - border,
'top' : ( t_h - border ) / 2 -3
})
$(target).css({
left:b_w + border,
top:o_T - ( t_h - b_h ) / 2
})
} else if( that.attr("data-direction") == 'left' ) {
$(target).find(".m_tip_bottom").css({
'border-top' : "6px solid #fff",
'border-bottom' : '6px solid #fff',
'border-left' : '6px solid #555556',
'border-right' : '0px',
'left' : t_w,
'top' : ( t_h - border ) / 2 -3
})
$(target).css({
left:o_L - t_w - border,
top:o_T - ( t_h - b_h ) / 2
})
}
$(target).show();
},function(){
$(target).hide();
})
}
})
