具体原理可以参考我的这篇文章: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);
今天的文章jQuery对称三角箭头分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/67619.html