jQuery插件Round Shadow实现圆角和阴影（原理一）

最新推荐文章于 2019-08-14 14:17:23 发布

最新推荐文章于 2019-08-14 14:17:23 发布 · 262 阅读

文章标签：

#jQuery #CSS #ViewUI

Web开发专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个jQuery插件，用于实现HTML元素的圆角和阴影效果。插件提供了三种方案，包括使用table标签、margin和padding属性以及CSS3的box-shadow属性。文章详细解析了这些方案的原理和实现细节。

一、插件介绍
编写该插件的目的是为了较为简单地实现为HTML元素添加圆角和阴影效果，在网上也有不同的方案来该效果，本插件也综合了一部分的实现方案，不过由于浏览器支持问题以及css原生的支持问题导致了最终还是没有一个完美的方案。还是特别期待各大浏览器对css3的支持程度能够越来越高，特别是IE浏览器。由于IE浏览器对HTML标准的支持程度太弱，导致本插件在IE上的表现效果要比其他浏览器差很多。
该插件内置了三种实现方案：
1、使用table标签实现圆角和阴影，该方案的最大好处是阴影的区域的高度和宽度能够随着元素框的内容自动变化，最大的缺点就是改变了所要装饰节点的继承关系，虽然返回的jQuery包装集是改变后的节点集合，但是已不能正确地直接使用该集合找到每个节点的原来的父节点和兄弟节点。故该方案不适合需要保持所装饰节点的继承关系的页面中。
2、使用元素的margin和padding属性，该方案利用了css的框模型，通过调整框的margin和padding将圆角阴影效果的图片放到合适的位置，从而实现视觉效果上的圆角和阴影，该方案的优点是不改变节点的继承关系，只是在该节点添加了三个新节点，并且位于首尾位置，基本上对后续编程不造成影响。但是其缺点是圆角和阴影的宽度只能是背景图片的宽度，若要嵌套使用的话，需要对每层使用不同的背景图片。
3、使用css3的box-shadow属性，该方案实际上是最理想的方案，但是由于其比较新，老版的浏览器将不会支持该属性的使用，而其IE的各版本也不支持css3（不知IE9如何）。所以该方案只能在较新的且非IE的浏览器上看到特别好的效果。在IE中使用该插件也能显示阴影效果，但是圆角效果不能实现，且阴影效果也是差强人意。
以上三种方案，每种方案均存在不同程度的问题，而且可能还有些未知的问题还没有发现，期待能够在以后的工作中不断完善。
二、各方案原理及实现
1、"<table></table>"实现圆角和阴影
a、原理
首先，将圆角和阴影背景分成9个部分，详细如图：

[img]http://dl.iteye.com/upload/attachment/422500/b120538f-f151-3f6e-bd13-ffed3cb61685.png[/img]
所以作为圆角和阴影的效果图片，需要将其裁剪为如图的9个部分，其中顶边和底边的宽度取为1px，左边和右边的高度取为1px，中心面板的宽高各取1px即可。
下一步的操作就是将所裁切的9个部分用表格<table>框住，然后将所装饰的元素的内容部分放到中心面板（center-board）处，下面就是对表格的属性进行设置，使4条边的图片能够随着内容的变化而变化，而不出现缺口。
b、实现
下面便是具体的表格部分的代码，为了使表格能够拥有所装饰节点的定位方式等属性，故在表格外再添加了一层<div>：


roundPanel = jQuery(
			  '<div class="default-round-shadow">'
			+ '<table border="0" cellspacing="0" cellpadding="0">'
			+	  '<tr class="round-shadow-top">'
			+		  '<td class="round-shadow-top-left"></td>'
			+		  '<td class="round-shadow-top-edge"></td>'
			+		  '<td class="round-shadow-top-right"></td>'
			+	  '</tr>'
			+	  '<tr class="round-shadow-body">'
			+		  '<td class="round-shadow-left-edge"></td>'
			+		  '<td class="round-shadow-center-board"></td>'
			+		  '<td class="round-shadow-right-edge"></td>'
			+	  '</tr>'
			+	  '<tr class="round-shadow-bottom">'
			+	  	  '<td class="round-shadow-bottom-left"></td>'
			+		  '<td class="round-shadow-bottom-edge"></td>'
			+		  '<td class="round-shadow-bottom-right"></td>'
			+	  '</tr>'
			+ '</table>'
			+ '</div>'
		);

下面是所用到的css类：


.default-round-shadow {
}
.default-round-shadow table {
}
/* round shadow panel's top*/
.round-shadow-top-left {
	width: 12px;
	height: 12px;
	background: transparent url("images/default/top_left.png") no-repeat;
}
.round-shadow-top-edge {
	height: 12px;
	background: transparent url("images/default/top_edge.png") repeat-x;
}
.round-shadow-top-right {
	width: 12px;
	height: 12px;
	background: transparent url("images/default/top_right.png") no-repeat;
}
/* round shadow panel's body*/
.round-shadow-left-edge {
	width: 12px;
	background: transparent url("images/default/left_edge.png") repeat-y;
}
.round-shadow-center-board {
	background: transparent url("images/default/center_board.png") repeat;
}
.round-shadow-right-edge {
	width: 12px;
	background: transparent url("images/default/right_edge.png") repeat-y;
}
/* round shadow panel's bottom*/
.round-shadow-bottom-left {
	width: 12px;
	height: 12px;
	background: transparent url("images/default/bottom_left.png") no-repeat;
}
.round-shadow-bottom-edge {
	height: 12px;
	background: transparent url("images/default/bottom_edge.png") repeat-x;
}
.round-shadow-bottom-right {
	width: 12px;
	height: 12px;
	background: transparent url("images/default/bottom_right.png") no-repeat;
}

在css表单中只是对图片的高度和宽度进行了指定，并且规定了图片在x还是y方向上重复出现，在重新定义其他样式的圆角和阴影时需参照上面的方式进行定义。
为了保持所装饰节点的定位方式和外边距，需将原来节点的定位属性和外边距移到表格上：


roundPanel.css({
			'position' : element.css('position'),
			'top' : element.css('top'),
			'left' : element.css('left'),
			'margin-top' : element.css('margin-top'),
			'margin-right' : element.css('margin-right'),
			'margin-bottom' : element.css('margin-bottom'),
			'margin-left' : element.css('margin-left')
		});
// change the element's margin to zero
element.css({'margin' : '0px','position' : 'static'});

最后将节点添加到面板的中心：


// append this element to round shadow table
roundPanel.find(".round-shadow-body .round-shadow-center-board").append(element.clone());
// replace this element
element.replaceWith(roundPanel);

为了保证插件的可链式操作，最后可以返回所装饰节点装饰后的新的对象：


// return the new node
return centerBoard.children().last();

为了防止已被装饰的元素重复被装饰，故在函数开头添加判断：


// if the element has been roundShadowed,just return
if(element.parent().attr("class") == "round-shadow-center-board"){
	return element;
}

上面的操作仅仅是针对一个节点的，在该插件中是一个私有函数，针对包装集的操作如下：


jQuery.fn.defaultRoundShadow = function(options){
	var opts = jQuery.extend({},jQuery.fn.defaultRoundShadow.defaults,options);
	var panels = jQuery(this);
	var size = panels.size();
	return panels.each(function(i,p){
		// from last to first,just insure the children will be roundShadowed first
		var index = size - 1 - i;
		var panel = jQuery(panels.get(index));
		// relocate this element's brothers
				...;
		// add round shadow effect,and save new node
		panels[index] = defaultRoundShadow(panel.textNodeWrap(opts.tag));
	});
};

c、效果截图
以下为使用该方法所生成的效果图：
Opera11下效果：

[img]http://dl.iteye.com/upload/attachment/422511/76456c1e-66af-37c0-a7ea-935b945a649c.bmp[/img]

FireFox3.6下效果：

[img]http://dl.iteye.com/upload/attachment/422509/974e07c3-676d-3759-8e21-e6ce91cc288b.bmp[/img]

IE7下效果：

[img]http://dl.iteye.com/upload/attachment/422507/37fc4110-c181-392f-a167-86dd1758d7b6.bmp[/img]

从上面的截图可以看出该方法在不同浏览器下的表现还是比较一致的，除了在IE7下没能显示边框效果以外，其他的还算正常。

项目已放到Google Code上，可以下载：[url]http://code.google.com/p/jquery-round-shadow/[/url]
[url=http://www.iteye.com/topic/913984]jQuery插件Round Shadow实现圆角和阴影（原理二）[/url]
[url=http://www.iteye.com/topic/913994]jQuery插件Round Shadow实现圆角和阴影（使用）[/url]