`
flytreeleft
  • 浏览: 93132 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

jQuery插件Round Shadow实现圆角和阴影(原理二)

阅读更多
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 Round Shadow

    jQuery Round Shadow是一个用于在网页上实现圆角阴影效果的JavaScript库。这个库主要目标是为网页元素添加平滑、美观的圆形或弧形阴影,从而提升网页设计的视觉吸引力。在传统的CSS技术中,实现这样的效果往往需要...

    jquery实现圆角实例

    在本实例中,我们将探讨如何利用 jQuery 来实现元素的圆角效果,包括层的圆角和背景的圆角。 首先,要实现 jQuery 圆角功能,我们需要理解 CSS3 的 border-radius 属性,这是原生支持元素圆角的关键。在 CSS3 中,...

    jquery插件集-圆角效果

    综上所述,"jquery插件集-圆角效果" 提供了一种利用 jQuery 实现网页圆角效果的方法,适用于那些需要兼容旧版浏览器或希望用 JavaScript 动态改变圆角效果的场景。通过扩展 jQuery 对象,我们可以轻松地将圆角效果...

    我的第一个jQuery插件 -- 圆角DIV

    标题 "我的第一个jQuery插件 -- 圆角DIV" 指涉的是一个关于创建自定义jQuery插件的教程,该插件主要用于实现HTML元素(尤其是DIV)的圆角效果。在早期的Web开发中,CSS2无法直接创建圆角,所以开发者会利用...

    jQuery实现超酷真实阴影效果 jQuery插件realshadow实现超酷真实阴影效果.zip

    本文将详细介绍如何使用jQuery插件`realshadow`来实现超酷的真实阴影效果,以及与之相关的前端技术,包括CSS、JavaScript、HTML5和jQuery。 首先,jQuery是一种流行的JavaScript库,它简化了DOM操作、事件处理、...

    jquery插件库大全(200个).zip

    jquery实现网易邮箱首页插件 jquery导航,缓慢弹出下拉效果 jquery左侧导航滑动网页定位效果 jquery左侧弹出二级菜单 jquery弹出层 jquery弹出层 三种弹出效果 jquery弹出插件 jquery抽奖插件 jquery抽奖插件.rar ...

    jQuery圆角插件:jquery.corners.js

    jQuery圆角插件,如`jquery.corners.js`,是前端开发中常见的一种工具,用于在网页元素上实现圆角效果。在Web设计中,圆角可以为界面增添柔和感和现代感,使得用户界面更加友好。在CSS3之前,创建圆角效果通常需要...

    Jquery实现圆角边框效果的源码

    首先,`jquery.curvycorners.source.js`、`jquery.curvycorners.min.js` 和 `jquery.curvycorners.packed.js` 这三个文件是jQuery圆角边框插件的不同版本。`source.js` 是源代码文件,便于开发者查看和理解实现机制...

    jQuery插件之圆角插件.

    jQuery插件是JavaScript库jQuery的一种扩展,用于增加特定功能或简化特定任务的实现。在本例中,我们关注的是“jQuery插件之圆角插件”,这是一个专门用于为HTML元素添加圆角效果的工具。在早期的Web开发中,创建...

    jQuery圆角插件,实现兼容浏览器圆角效果

    但是这些方法在实现的过程中,总是会增加很多无谓的工作任务,而且还有可能无法做到浏览器之间的兼容性,那么就介绍一个非常简单的jQuery圆角实现效果吧,说是圆角有点小看它了,因为它可以实现的不止是圆角,看这...

    jquery 圆角插件 jquery-corners-0.3.zip

    jQuery-corners插件还提供了多种可定制的参数,允许开发者调整圆角的大小、阴影效果、边角类型(如只设置四个角中的某一个或两个),以及是否在IE6和IE7这样的老版本浏览器中启用圆角效果。这些参数可以作为对象传递...

    圆角带阴影的jquery气泡浮动提示特效.rar

    这个压缩包文件提供了一个实现特定视觉效果的源码示例,它是一个利用jQuery插件创建的、带有圆角和阴影的气泡式浮动提示效果。 首先,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和...

    jQuery Canvas Rounded Corners - jQuery圆角插件

    而`jquery.corners.js`则是jQuery圆角插件的主要脚本,它包含实现圆角效果的函数和逻辑。 在页面中引入这些文件后,可以通过jQuery选择器选取需要添加圆角效果的元素,并调用`.corners()`方法来应用插件。例如: `...

    生成各种阴影效果的jQuery插件.rar_southernl1r_生成各种阴影效果的jQuery插件

    总结来说,这款“生成各种阴影效果的jQuery插件”是为了简化CSS3阴影的使用,提供了一种直观、便捷的方式来创建和管理元素的阴影效果,使得开发者能更专注于整体的设计和用户体验,而无需在阴影的细节上花费过多精力...

    CSS3实现圆角阴影渐变效果兼容IE等浏览器

    本文将深入探讨如何利用CSS3实现圆角、阴影和渐变效果,并确保这些效果在包括IE在内的主流浏览器中都能得到良好的兼容性。 首先,我们来讨论CSS3的圆角效果。在CSS3之前,为了实现圆角,开发者通常需要使用大量的...

    jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar

    jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar jQuery插件-实现HTML5微信红包...

    jquery插件corner实现圆角边框的方法

    8. corner插件对jQuery程序设计的帮助:通过本文的介绍和示例,开发者可以了解到如何利用corner插件轻松实现圆角边框效果,这将有助于提升jQuery程序设计的效率和界面美观性。开发者在实际项目中,可以参考本文所述...

    jquery插件库-jquery抽奖插件.zip

    三、jQuery抽奖插件的实现原理 实现一个抽奖插件,主要涉及以下几个步骤: 1. 创建HTML结构:构建抽奖界面,可以是旋转盘、滚动条或其他形式。 2. CSS样式设定:通过CSS定义元素的初始状态和动画效果。 3. ...

    jquery插件库-3D框阴影着色.zip

    这个“jquery插件库-3D框阴影着色.zip”文件包含了一个专门针对jQuery的插件,该插件主要用于实现3D框阴影效果,为网页元素增添视觉深度和立体感。 首先,jQuery插件是一种扩展jQuery功能的方法,它们是封装好的...

    兼容所有浏览器的 Jquery 圆角插件,可配置

    本文将详细介绍一个兼容所有浏览器的jQuery圆角插件的使用和实现原理。 **1. 插件介绍** 标题中的"兼容所有浏览器的jQuery圆角插件"指的是一个专门用于使HTML元素(如div)具有圆角效果的JavaScript插件。它利用...

Global site tag (gtag.js) - Google Analytics