先看效果
introduce
jQuery photoframe plugin
A useful plugin to beautify image or text by wrapping target with image frame
Copyright (c) 2010 surfsky
Free to use but don't modify this notation
@author: surfsky.cnblogs.com
@version: 0.2
@lastupdate: 2010-06-30
jquery.photoFrame是很方便的一个相框插件，原理也很简单，将选定对象用九宫格table包裹，再设置其边框的背景图片即可。以上三种样式都是用photoframe实现的，我会继续丰富其样式，目标是拿来即用，简化页面代码。此代码可以任意使用，但转载请注明出处：http://surfsky.cnblogs.com/
what's new
v0.2 支持skin，同一页面支持多种样式同时存在
新增样式 deepShadow
修改内嵌image在ie6下会留白的bug
v0.1 新建，实现基本功能
usage
<link type="text/css" rel="stylesheet" href="shadow/style.css" />
<link type="text/css" rel="stylesheet" href="deepshadow/style.css" />
<link type="text/css" rel="stylesheet" href="stamp/style.css" />
<link type="text/css" rel="stylesheet" href="topbanner/style.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.photoFrame.js"></script>
<script type="text/javascript">
$(function(){
$("#target1").photoFrame();
$("#target2").photoFrame({skin:'shadow', direction:'bottomRight'});
$("#target3").photoFrame({skin:'deepshadow', direction:'bottomRight'});
$("#target4").photoFrame({skin:'stamp', direction:'all'});
$("#target5").photoFrame({skin:'topbanner', direction:'top'});
});
</script>
<div id="target1">
<img src="images/1.jpg" />
</div>
<div id="target2">
<img src="images/2.jpg" />
</div>
<div id="target3">
<img src="images/3.jpg" />
</div>
<div id="target4">
<img src="images/4.jpg" />
</div>
<div id="target5">
<h2>this is title</h2>
thfjsjfkljslfjsjfldsjflkjdslkfjdslkjflskjfljslfjslfkjsfkjdslfjsdljklsjfjdslkfjsdlkfjslkjflkdsjflkdsjfkdsjlkjfslkds
</div>
parameters
skin（皮肤名称）:
'shadow', 'deepshadow', 'stamp', 'topbanner'
direction（画框方向）:
'top', 'bottom', 'left', 'right'
'topLeft', 'topRight', 'bottomLeft', 'bottomRight'
skin
shadow: 阴影效果
deepShadow: 加深阴影效果
topBanner: 顶部banner效果
stamp: 邮票效果
cloud: 云朵包围效果（未实现）
teal: 撕纸效果（未实现）
extense skin （扩展样式）
拷贝skin目录，拷贝图片并修改css就可以了
.myskin .tl {background:url(tl.gif) no-repeat; width:5px; height:5px;}
.myskin .t {background:url(t.gif) repeat-x; height:5px;}
.myskin .tr {background:url(tr.gif) no-repeat; width:5px; height:5px;}
.myskin .l {background:url(l.gif) repeat-y; width:5px;}
.myskin .r {background:url(r.gif) repeat-y; width:5px;}
.myskin .b {background:url(b.gif) repeat-x; height:5px;}
.myskin .bl {background:url(bl.gif) no-repeat; width:5px; height:5px;}
.myskin .br {background:url(br.gif) no-repeat; width:5px; height:5px;}
.myskin .m {border:solid black 1px; padding-bottom:-5px; margin-bottom:-10px;}
.myskin img {display:block;}
下载：
0.1 /Files/surfsky/jquery.photoFrame.rar
0.2 /Files/surfsky/jquery.photoFrame.0.2.rar