jQuery对称三角箭头

使用方法如下：

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

时间： 2024-08-23 23:21:46

jQuery对称三角箭头的相关文章

jQuery 倒三角正三角

智障啊! 今天脑抽了想写一个jQuery 倒三角锻炼自己,想了半天才有一点头绪. 研究结果如下: <script type="text/javascript"> $(function(){ var str = "*"; //正三角 for(i = 0;i < 5;i++){ for(j=0;j < i;j++){ document.write(str); } document.write("<br>"); }

纯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> <title>纯CSS制作的三角箭头丨kiddy<

css实现三角箭头

像下面的向右三角箭头,只有纯css不需要图片就可以实现了. width:0px;height:0px;border-width:10px 7px 0 7px; border-style:solid;border-color: #ccc transparent transparent transparent; 向下箭头 width:0px;height:0px;border-width:20px 10px 0 10px ; border-style:solid;border-color:#FFF

border实现三角箭头

1 <!DOCTYPE html> 2 <html> 3 <title> 边框属性实现三角箭头及其原理</title> 4 <meta charset="utf-8" /> 5 <head> 6 <style> 7 #demo { border: 10px solid #333; border-left-color: #f00; width: 10px; height: 10px; /*border-c

使用css写三角箭头

.right-arrow{ width:6px; height:6px; align-self: center; border-right:1px solid #2ac795; border-left:2px solid transparent; border-top:2px solid transparent; border-bottom:1px solid #2ac795; display:block; transform: rotateZ(-45deg); } 以上为向右的箭头,如果箭头向

css-画三角箭头

.arrow { width: 0; height: 0; content: ""; border: solid 10px #7c7; display: block; border-top-color:transparent; border-left-color:transparent; border-bottom-color:transparent; } 原理:设置一个足够宽的边框 border: solid 10px #7c7; 然后通过边框按斜线分四等份的方式设置每一等份的情况

网页三角箭头的制作

<!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 runat="server"> <title&g

css三角箭头

效果: css: .jt { display:inline-block; /*和后面的文字在同一行*/ *display: inline; /*ie6 7块级元素inline-block兼容*/ *zoom:1; /*同上*/ height:0px; width:0px; line-height:0px; /*行高设0,不然ie6会撑开*/ vertical-align:

jquery实现上下箭头下拉框

<html> <head></head> <body> <form class="select"> <input type="text" value="3" id="am" class="am" readonly="" /> <div class="icon"> <div cla