2、css框模型实现圆角和阴影
a、原理
W3C对框模型的结构定义如图所示:
从图可以看出元素框的可见部分为padding和element两部分,margin的部分默认为透明,而且W3C中已说明背景部分由内容(element)和内边距(padding)组成,所以我们可以构造一张带有圆角和阴影的背景图片,将左边缘、中心、右边缘部分作为所装饰元素的背景,将图片的顶部(包括左上角、顶边、右上角)和底部(包括左下角、底边、右下角)作为元素节点的首个子节点和最后一个子节点,并且对顶部和底部进行相应的偏移,将其移动到所装饰节点的外边距(margin)部分,最后调整内容部分的内边距,即可实现较好的圆角和阴影效果了。
对背景图片的分割如图所示:
由于该方法的背景图片的宽度是固定的,所以所装饰元素的宽度也需要被修改成背景图片的宽度,以防止内容的溢出,这也是该方法的局限所在。
b、实现
了解了方法二的原理后,下面便是该方法的实现。
首先,在使用该方法前需要为其定义一个css类,如simple-round-shadow,该类可以为空,也可以添加其他限定所装饰元素样式的属性,然后定义三个类,分别为simple-round-shadow-top,simple-round-shadow-body,simple-round-shadow-bottom,其中simple-round-shadow即为所要传入到该方法中的参数prefix的值,在定义自己的样式时也需要定义如上的结构,在代码中将根据prefix为top,body,bottom构造css类为<prefix>-top,<prefix>-body,<prefix>-bottom。在top,body,bottom的三个类中必须为属性background-image赋值,即必须指定背景图片。默认的样式结构如下:
.simple-round-shadow {
background-color: transparent;
}
.simple-round-shadow-top {
/* background-image is necessary*/
background: transparent url("images/simple/top.png") no-repeat;
}
.simple-round-shadow-body {
/* background-image is necessary*/
background: transparent url("images/simple/body.png") repeat-y;
}
.simple-round-shadow-bottom {
/* background-image is necessary*/
background: transparent url("images/simple/bottom.png") no-repeat;
}
为了避免使用者对背景的偏移等计算失误而导致结果差强人意,在代码中对背景图片的宽度和高度进行了自动获取,然后在依据高宽对所装饰元素的外边距和内边距进行计算,以达到较为满意的效果。以下为获取背景图片的高宽的函数:
/**
* get the style's background-image's width and height
* @param {String} className -- the css class's name
* @return {Object{width,height}} the background image's width and height
*/
function getBgImgWH(className){
var element = jQuery('<div class="'+className+'"></div>');
var urlReg = /^url\("(.*)"\)$/;
var image = new Image();
var res = "";
// in Opera and IE,the element must be add to document,
// or you cann't get the css class's background-image's value
jQuery(document.body).append(element.hide());
res = urlReg.exec(element.css('background-image'));
element.remove();
if(res == null){
return {width:0,height:0};
} else {
image.src = res[1];
return {width:image.width,height:image.height};
}
};
根据函数geBgImgWH获取到css类中背景图片的高宽:
var topImgWH = getBgImgWH(opt.prefix+"-top");
var bottomImgWH = getBgImgWH(opt.prefix+"-bottom");
var bodyImgWH = getBgImgWH(opt.prefix+"-body");
取顶部和底部背景图片高度中最小值作为所装饰元素的左右内边距偏移量:
var pRL = Math.min(topImgWH.height,bottomImgWH.height);
接着构造圆角和阴影的top,body,bottom部分:
var top = jQuery('<div class="'+opt.prefix+'-top"></div>');
var space = jQuery('<div class="'+opt.prefix+'-space"></div>');
var bottom = jQuery('<div class="'+opt.prefix+'-bottom"></div>');
然后对所装饰元素添加样式prefix和<prefix>-body,并修改其宽度为:躯干部背景图片的宽度-2*内边距偏移量,即bodyImgWH.width-2*pRL;元素的上下外边距在原来的基础上分别加上顶部和底部的高度,元素的左右内边距则在原来的基础上加上pRL。具体代码如下:
// add new css style to this element,and change the old background-color
// to avoid displaying motely at left and right edges,and change it's width
// to hold the background image
element.addClass(opt.prefix+" "+opt.prefix+"-body").css({
'background-color' : 'transparent',
'background-repeat' : 'repeat-y',
'width' : (bodyImgWH.width-2*pRL)+"px",
'margin-top' : (marginTop+topImgWH.height)+"px",
'margin-bottom' : (marginBottom+bottomImgWH.height)+"px",
'padding-left' : (paddingLeft+pRL)+"px",
'padding-right' : (paddingRight+pRL)+"px"
});
下面接着将顶边top改为浮动框并为其设置高度和宽度,修改外边距,使其浮动到元素的边框外部,最后将其插入到元素的第一个节点位置。代码如下:
// modify the top's style to fit the element's margin and padding,
// and prepend it to the element
top.css({
'float' : 'left',
'height' : topImgWH.height+"px",
'width' : topImgWH.width+"px",
'margin' : "-"+topImgWH.height+"px 0px 0px -"+pRL+"px",
'background-repeat' : 'no-repeat'
});
element.prepend(top);
为了防止使用该方法同时装饰父子节点时出现缺口,在元素的尾部添加了一个透明层,用来填补由于底部浮动造成的缺口。代码如下:
// modify the space's style and append it to the element
space.css({
'height' : bottomImgWH.height+"px",
'margin' : "-"+bottomImgWH.height+"px 0px 0px",
'background-color' : 'transparent'
});
element.append(space);
最后将修改了外边距和浮动属性的底部bottom添加到所装饰元素的尾部,完成对该节点的装饰。代码如下:
// and append it to the element
bottom.css({
'float' : 'left',
'height' : bottomImgWH.height+"px",
'width' : bottomImgWH.width+"px",
'margin' : "0px 0px -"+bottomImgWH.height+"px -"+pRL+"px",
'background-repeat' : 'no-repeat'
});
// add the round-shadow's bottom css style
element.append(bottom);
同时为了避免对已装饰元素重复装饰,在函数开始部分添加判断:
// one word cotain '-',so replace '-' to '_' for finding opt.prefix
var classReg = new RegExp("\\b"+opt.prefix.replace(/\-/g,'_')+"\\b");
// if the element has been roundShadowed,just return
if(classReg.test(element.attr('class').replace(/\-/g,'_'))){
return;
}
与方法一一样,上面的方法只是针对一个元素进行装饰,要对jQuery包装集中元素进行装饰,则方法如下:
jQuery.fn.simpleRoundShadow = function(options){
var opts = jQuery.extend({},jQuery.fn.simpleRoundShadow.defaults,options);
return jQuery(this).each(function(){
var panel = jQuery(this);
var opt = jQuery.meta ? jQuery.extend({},opts,panel.data()) : opts;
// wrap this panel's text node
...;
// add round-shadow effect
simpleRoundShadow(panel,opt);
});
};
c、效果截图
Opera11下效果:
FireFox3.6下效果:
IE7下效果:
上面IE与Oprea和FireFox的效果差异体现较为明显,原因是IE对元素框模型的定义与W3C标准有差异造成的,在该插件中没有对该差异进行处理。
3、css3实现圆角和阴影
该方法由于是使用了css3所支持的box-shadow特性,为元素添加box-shadow,border,border-radius属性即可轻松实现圆角和阴影效果,但是不同的浏览器对css3的支持效果有差异,并且IE暂不支持css3,所以采取了较为折中的实现。代码如下:
var direction = opt.shadowXOffset ? parseInt((1-Math.atan(opt.shadowYOffset/opt.shadowXOffset)/Math.PI)*180) : 90;
element.css({
'padding' : opt.roundRadius,
'box-shadow' : opt.shadowXOffset+'px '+opt.shadowYOffset+'px '+opt.shadowDepth+'px '+opt.shadowColor,
'-moz-box-shadow' : opt.shadowXOffset+'px '+opt.shadowYOffset+'px '+opt.shadowDepth+'px '+opt.shadowColor,
'-webkit-box-shadow' : opt.shadowXOffset+'px '+opt.shadowYOffset+'px '+opt.shadowDepth+'px '+opt.shadowColor,
'filter' : 'progid:DXImageTransform.Microsoft.Shadow(Strength='+opt.shadowDepth+',Direction='+direction+',Color="'+opt.shadowColor+'")',
'-ms-filter' : '"progid:DXImageTransform.Microsoft.Shadow(Strength='+opt.shadowDepth+',Direction='+direction+',Color="'+opt.shadowColor+'")"',
'border' : opt.border,
'-moz-border-radius' : opt.roundRadius,
'-webkit-border-radius' : opt.roundRadius,
'border-radius' : opt.roundRadius,
'background-color' : backgroundColor
});
具体的css3 box-shadow实现圆角和阴影的细节,可参考:
http://blog.imbolo.com/cross-browsers-css-shadow/
下面是该方案的效果截图:
Opera11下效果:
FireFox3.6下效果:
IE7下效果:
三、总结
以上三种方案只是可能的实现方式,并不代表终极实现,仅仅是提供一个思路,同时也从中学到了不少知识。当然该插件必然还存在很多问题,希望能在以后的使用中不断完善。
项目已放到Google Code上,可以下载:
http://code.google.com/p/jquery-round-shadow/
jQuery插件Round Shadow实现圆角和阴影(原理一)
jQuery插件Round Shadow实现圆角和阴影(使用)
- 大小: 622 Bytes
- 大小: 9 KB
- 大小: 5.6 KB
- 大小: 5.6 KB
- 大小: 3 KB
- 大小: 1.8 KB
- 大小: 832 Bytes
- 大小: 1.7 KB
分享到:
相关推荐
jQuery实现超酷真实阴影效果 jQuery插件realshadow实现超酷真实阴影效果.zip
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
但是这些方法在实现的过程中,总是会增加很多无谓的工作任务,而且还有可能无法做到浏览器之间的兼容性,那么就介绍一个非常简单的jQuery圆角实现效果吧,说是圆角有点小看它了,因为它可以实现的不止是圆角,看这...
jquery 圆角插件 jquery 圆角插件 jquery 圆角插件
jquery实现圆角功能,实现层的圆角,背景的圆角
Jquery实现圆角边框效果的源码,Jquery实现圆角边框效果的源码
jquery实现网易邮箱首页插件 jquery导航,缓慢弹出下拉效果 jquery左侧导航滑动网页定位效果 jquery左侧弹出二级菜单 jquery弹出层 jquery弹出层 三种弹出效果 jquery弹出插件 jquery抽奖插件 jquery抽奖插件.rar ...
jquery 插件,实现多种不同的滚屏操作,
使用jQuery插件FancyBox轻松实现弹窗视频,使用jQuery插件FancyBox轻松实现弹窗视频
jquery实现圆角边框 圆角边框 jquery实现圆角边框 圆角边框
jQuery Canvas Rounded Corners - jQuery圆角插件
主要介绍了jquery插件corner实现圆角边框的方法,实例分析了jQuery插件corner的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery-Validation-Engine-master 表单验证插件 简单好用,已经包含汉化
jQuery圆角插件:jquery.corners.js
生成圆角的 jquery 插件
jquery corners 圆角插件 jquery corners 圆角插件
jQueryPager(JQuery分页插件pagination实现Ajax分页) CSDN犀利助互群60168829
jquery插件城市二级联动 使用简单 数据是以微信地区数据为例
本源码演示实现一款圆角带阴影的jquery浮动提示特效,核心基于jquery插件,样式如气泡提示插件,很不错的效果,希望大家可以用得上。
资源名称:jQuery技术内幕:深入解析jQuery架构设计与实现原理内容简介:本书首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jQuery的工作原理有大致的印象;进而通过“构造 jQuery 对象”章节...