jQuery对称三角箭头

页面导航:首页 > 网络编程 > JavaScript > jQuery对称三角箭头

jQuery对称三角箭头

来源: 作者: 时间:2016-02-02 09:59 【

具体原理可以参考我的这篇文章:jQuery弹出层 43;CSS箭头制作使用方法如下:无标题文档*{margin:0;padding:0}b{margin-top:20px} 左箭头$( left ) arrow({color: 39; FF0000 39;,h

具体原理可以参考我的这篇文章:jQuery弹出层+CSS箭头制作

使用方法如下:




	
	无标题文档
	<script type="text/javascript" src="jquery-1.9.1.js"></script>
	<script type="text/javascript" src="jquery.arrow.js"></script>
	

	
	
	
	


<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>

具体实现代码:

/**
 * 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);



Tags:

文章评论


<