The first jquery plug-in I wrote: jquery. photoframe (version 0.2)

First view results

 

Introduce
Jquery photoframe plugin
A useful plugin to beauw.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 is a convenient Photo Frame plug-in. The principle is also very simple. You can wrap the selected object with a nine-square-lattice table and then set the background image of its border. All the above three styles are implemented using photoframe. I will continue to enrich their styles to simplify the Page code. This code can be used at will, but reprinted please note the Source: http://surfsky.cnblogs.com/

What's new
V0.2 supports skin, and multiple styles exist simultaneously on the same page.
New Style deepshadow

Modify the bug that the embedded image will be white in IE6
Create v0.1 to implement basic functions

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 ', ction: 'bottomright '});
$ ("# Target3"). photoframe ({skin: 'depshadow ', ction: 'bottomright '});
$ ("# Target4"). photoframe ({skin: 'stamp', ction: 'all '});
$ ("# Target5"). photoframe ({skin: 'topb', ction: 'top '});
});
</SCRIPT>
<Div id = "target1">

</Div>
<Div id = "TARGET2">

</Div>
<Div id = "target3">

</Div>
<Div id = "target4">

</Div>
<Div id = "target5">
<H2> This is Title </H2>
Bytes
</Div>

 

Parameters
Skin (skin name ):
'Shadow ', 'depshadow', 'stamp', 'topbyanner'
Direction ):
'Top', 'bottom', 'left', 'right'
'Topleft', 'topright', 'bottomleft', 'bottomright'

Skin
Shadow: shadow effect
Deepshadow: Deepen the shadow effect
Topbanner: Top Banner Effect
Stamp: Stamp Effect
Cloud: cloud effect (not implemented)
Teal: Paper Tearing effect (not implemented)

Extense skin (Extended style)
Copy the skin directory, copy the image, and modify 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 ;}

 

Download:

0.1/files/surfsky/jquery.photoframe.rar
0.2/files/surfsky/jquery.photoframe.0.2.rar