一、插件介绍
编写该插件的目的是为了较为简单地实现为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个部分,详细如图:
所以作为圆角和阴影的效果图片,需要将其裁剪为如图的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下效果:
FireFox3.6下效果:
IE7下效果:
从上面的截图可以看出该方法在不同浏览器下的表现还是比较一致的,除了在IE7下没能显示边框效果以外,其他的还算正常。
项目已放到Google Code上,可以下载:
http://code.google.com/p/jquery-round-shadow/
jQuery插件Round Shadow实现圆角和阴影(原理二)
jQuery插件Round Shadow实现圆角和阴影(使用)
- 大小: 21.1 KB
- 大小: 5.6 KB
- 大小: 5.8 KB
- 大小: 5.6 KB
分享到:
相关推荐
jQuery实现超酷真实阴影效果 jQuery插件realshadow实现超酷真实阴影效果.zip
但是这些方法在实现的过程中,总是会增加很多无谓的工作任务,而且还有可能无法做到浏览器之间的兼容性,那么就介绍一个非常简单的jQuery圆角实现效果吧,说是圆角有点小看它了,因为它可以实现的不止是圆角,看这...
jquery 圆角插件 jquery 圆角插件 jquery 圆角插件
jquery实现圆角功能,实现层的圆角,背景的圆角
Jquery实现圆角边框效果的源码,Jquery实现圆角边框效果的源码
jquery 插件,实现多种不同的滚屏操作,
使用jQuery插件FancyBox轻松实现弹窗视频,使用jQuery插件FancyBox轻松实现弹窗视频
jquery实现网易邮箱首页插件 jquery导航,缓慢弹出下拉效果 jquery左侧导航滑动网页定位效果 jquery左侧弹出二级菜单 jquery弹出层 jquery弹出层 三种弹出效果 jquery弹出插件 jquery抽奖插件 jquery抽奖插件.rar ...
jquery实现圆角边框 圆角边框 jquery实现圆角边框 圆角边框
jQuery Canvas Rounded Corners - jQuery圆角插件
主要介绍了jquery插件corner实现圆角边框的方法,实例分析了jQuery插件corner的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery-Validation-Engine-master 表单验证插件 简单好用,已经包含汉化
jQuery圆角插件:jquery.corners.js
本源码演示实现一款圆角带阴影的jquery浮动提示特效,核心基于jquery插件,样式如气泡提示插件,很不错的效果,希望大家可以用得上。
生成圆角的 jquery 插件
jquery corners 圆角插件 jquery corners 圆角插件
jQueryPager(JQuery分页插件pagination实现Ajax分页) CSDN犀利助互群60168829
jQuery File Download实现ajax下载体验的jQuery插件
资源名称:jquery插件特效 WORD版内容简介:本文档主要讲述的是jquery插件特效;jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。jQuery 是一个快速的,简洁...
用jquery实现的进度条插件,使用非常简单,可用做程序进度显示或AJAX文件上传