jQuery对称三角箭头

浏览数：39 / 时间：2015年06月09日

使用方法如下：

<!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);

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery对称三角箭头