jQuery对称三角箭头

最新推荐文章于 2022-09-21 22:43:32 发布

许增强

最新推荐文章于 2022-09-21 22:43:32 发布

阅读量1.6k

点赞数

分类专栏： jQuery & javaScript HTML & CSS

本文链接：https://blog.csdn.net/xuzengqiang2/article/details/43982069

版权

jQuery & javaScript 同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

HTML & CSS

35 篇文章 0 订阅

订阅专栏

具体原理可以参考我的这篇文章：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);

许增强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery对称三角箭头

//左箭头$(".left").arrow({color:'#FF0000',height:10,width:20,direction:'left'});//默认情况$(".top").arrow();//向下箭头$(".bottom").arrow({color:'#FF9900',height:30,width:30,direction:'bottom'});
复制链接

扫一扫