标签：
具体原理可以参考我的这篇文章：jQuery弹出层+CSS箭头制作
使用方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.arrow.js"></script>
<style type="text/css">
*{margin:0;padding:0}
b{margin-top:20px}
</style>
</head>
<b class="left"/>
<b class="top"/>
<b class="bottom"/>
<b class="right"/>
<body>
</body>
<script type="text/javascript">
//左箭头
$(".left").arrow({color:'#FF0000',height:10,width:20,direction:'left'});
//默认情况
$(".top").arrow();
//向下箭头
$(".bottom").arrow({color:'#FF9900',height:30,width:30,direction:'bottom'});
</script>
</html>
具体实现代码：
/**
* jquery 箭头生成
* @author:xuzengqiang
* @since :2015-2-4 15:31:39
**/
;(function($){
jQuery.fn.extend({
/**
*描述:生成指定箭头样式
**/
arrow:function(options){
var defaultOptions = {
color:'#AFAFAF',
height:20,
width:20,
//方向:默认向上'top',供选择['up','bottom','left','right']
direction:'top'
};
var settings = jQuery.extend(defaultOptions,options||{}),
current = $(this);
function loadStyle(){
current.css({"display":"block","width":"0","height":"0"});
if(settings.direction === "top" || settings.direction === "bottom") {
current.css({
"border-left-width":settings.width/2,
"border-right-width":settings.width/2,
"border-left-style":"solid",
"border-right-style":"solid",
"border-left-color":"transparent",
"border-right-color":"transparent"
});
if(settings.direction === "top") {
current.css({
"border-bottom-width":settings.height,
"border-bottom-style":"solid",
"border-bottom-color":settings.color
});
} else {
current.css({
"border-top-width":settings.height,
"border-top-style":"solid",
"border-top-color":settings.color
});
}
} else if(settings.direction === "left" || settings.direction === "right") {
current.css({
"border-top-width":settings.height/2,
"border-bottom-width":settings.height/2,
"border-top-style":"solid",
"border-bottom-style":"solid",
"border-top-color":"transparent",
"border-bottom-color":"transparent"
});
if(settings.direction === "left") {
current.css({
"border-right-width":settings.width,
"border-right-style":"solid",
"border-right-color":settings.color
});
} else {
current.css({
"border-left-width":settings.width,
"border-left-style":"solid",
"border-left-color":settings.color
});
}
}
}
return this.each(function(){ loadStyle(); });
}
});
})(jQuery);标签：
原文地址：http://blog.csdn.net/xuzengqiang2/article/details/43982069
