使用该插件的基本语法如下:
$(selector).roundShadow(options);或jQuery(selector).roundShadow(options);
options的可选项针对不同的装饰方式分如下三种情况:
共同部分:
theme{String} : 装饰方法,可选项有"default","simple","css"。其中"default"使用table标签对元素进行装饰,"simple"使用框模型对元素进行装饰,"css"使用css3对元素进行装饰。
不同部分:
theme = "default":
radius{String,Number}: 圆角半径,即所裁剪的圆角阴影图片的左上角的宽度(裁剪部分应为四分之一圆,且高宽应一样),单位为"px",不接受其他单位的大小值,也可以使用数字。默认值为"12px"。
tag{String}: 指定对所装饰节点的文本节点所添加的HTML标签,默认值为"<div></div>"。
theme = "simple":
prefix{String}: 对所装饰节点应用的圆角和阴影的css类前缀,假如类前缀为"simple-round-shadow"(插件默认使用的类),则至少需定义如下类:"simple-round-shadow-body","simple-round-shadow-top","simple-round-shadow-bottom",且类中必须要指定background-image的值。默认值为"simple-round-shadow"。
tag{String}: 指定对所装饰节点的文本节点所添加的HTML标签,默认值为"<div></div>"。
theme = "css":
shadowXOffset{String,Number}: 阴影在X轴上的偏移量,以"px"为单位。默认为"1px"。
shadowYOffset{String,Number}: 阴影在Y轴上的偏移量,以"px"为单位。默认为"1px"。 shadowDepth{String,Number}: 阴影的浓度,以"px"为单位。默认为"4px"。
shadowColor{String}: 阴影颜色。默认为"#000000"。
roundRadius{String,Number}: 圆角半径,以"px"为单位。默认为"10px"。
border{String}: 元素边框样式,与css中的border设置相同。默认为"1px solid #000"。
CSS类定义说明:
1、当theme为"default",并且要使用自定义的css类时需注意,必须定义以下类:
"round-shadow-top-left","round-shadow-top-edge","round-shadow-top-right";
"round-shadow-left-edge","round-shadow-center-board","round-shadow-right-edge";
"round-shadow-bottom-left","round-shadow-bottom-edge","round-shadow-bottom-right";
与默认使用的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;
}
2、当theme为"simple",并且使用自定义的css类时同样需注意如下要求:
假如使用的prefix为simple,则需定义simple-body,simple-top和simple-bottom三个类,并且在这三个类中均要指定背景图片的url且背景色最好设置为transparent。默认样式如下:
.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;
}
项目已放到Google Code上,可以下载:
http://code.google.com/p/jquery-round-shadow/
jQuery插件Round Shadow实现圆角和阴影(原理一)
jQuery插件Round Shadow实现圆角和阴影(原理二)
分享到:
相关推荐
jQuery实现超酷真实阴影效果 jQuery插件realshadow实现超酷真实阴影效果.zip
使用jQuery插件FancyBox轻松实现弹窗视频,使用jQuery插件FancyBox轻松实现弹窗视频
W3C很早就已经在CSS 3 中加入了圆角属性border-radius,但是由于某些流行浏览器的不支持,使得其还是没能被广泛使用,所以我们会想尽办法去进行更好的补充,包括背景图片的圆角实现、js圆角实现等等。但是这些方法在...
jquery 圆角插件 jquery 圆角插件 jquery 圆角插件
jquery实现圆角功能,实现层的圆角,背景的圆角
Jquery实现圆角边框效果的源码,Jquery实现圆角边框效果的源码
jquery 插件,实现多种不同的滚屏操作,
jquery实现网易邮箱首页插件 jquery导航,缓慢弹出下拉效果 jquery左侧导航滑动网页定位效果 jquery左侧弹出二级菜单 jquery弹出层 jquery弹出层 三种弹出效果 jquery弹出插件 jquery抽奖插件 jquery抽奖插件.rar ...
jquery实现圆角边框 圆角边框 jquery实现圆角边框 圆角边框
主要介绍了jquery插件corner实现圆角边框的方法,实例分析了jQuery插件corner的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 ...
jQuery Canvas Rounded Corners - jQuery圆角插件
jQuery-Validation-Engine-master 表单验证插件 简单好用,已经包含汉化
jQuery圆角插件:jquery.corners.js
生成圆角的 jquery 插件
jQueryPager(JQuery分页插件pagination实现Ajax分页) CSDN犀利助互群60168829
用jquery实现的进度条插件,使用非常简单,可用做程序进度显示或AJAX文件上传
本源码演示实现一款圆角带阴影的jquery浮动提示特效,核心基于jquery插件,样式如气泡提示插件,很不错的效果,希望大家可以用得上。
jquery corners 圆角插件 jquery corners 圆角插件
自己封装的jquery插件@实现了简单的轮播图以及图片点击后的回调实现,自动播放等,