我写的第一个jquery插件：jquery.photoFrame（version 0.2）

先看效果

 

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