📄 index.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Corner.js (with IE 6/7 support)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-language" content="en">
<link rel="bookmark" type="text/html" title="Corner.js" href="http://www.netzgesta.de/corner/"> <meta name="Author" lang="en" content="corner.netzgesta.de - Christian Effenberger">
<meta name="Publisher" lang="en" content="www.netzgesta.de">
<meta name="Copyright" lang="en" content="www.netzgesta.de - Christian Effenberger">
<meta name="Generator" lang="en" content="Christian Effenberger"> <meta name="Description" lang="en" content="Corner.js 1.7 allows you to add corners (and also shading and shadow) to images on your webpages through unobtrusive javascript">
<meta name="Keywords" lang="en" content="corner.js, justcorners.js, images, corners, shading, shadow, unobtrusive javascript, Mozilla, Firefox, Opera, Safari, public domain">
<meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"><script type="text/javascript" src="justcorners.js"></script><script type="text/javascript" src="corner.js"></script>
<style type="text/css">
a { color: blue; font-style:italic; text-decoration:none; }tt {color: green;}b {color: #a00000;}
body { background: url(backgrnd.jpg) white; color: black; font-family: Georgia; line-height: 1.5; margin: 0.5em 1em;}
h2 { line-height: 1; }.demo { float: left; padding: 10px; }#guru { float: none; padding: 4px; width: 99%; height: auto; text-align: center; background-color: black; }#guru div { float: none; border: solid 3px red; padding: 4px; font-family: monospace; font-size: 1.25em; width: auto; height: auto; color: red; text-align: center; text-decoration: blink; }.bookmarks { white-space: nowrap; width: 98%; margin: 0; padding-top: 10px; border-top: 1px dotted gray;}</style>
</head>
<body><noscript><div id="guru" title="By this you can recognize the Amiga fan!"><div><b>Guru Meditation</b> - With deactivated JavaScript: Images stay unmodified!</div></div></noscript><table><tr><td valign="top" style="padding-top: 0.5em"><a href="corner.zip" title="download corner.js"><img src="corner.jpg" border="0" class="corner iradius16 ishadow30 inverse" alt="corner.js"></a></td><td style="padding: 0 0 0 15px; margin: 0; line-height: 1.5; font-style: italic;"><p><strong>Corner.js 1.7</strong> allows you to add corners (and also shading and shadow) to images on your webpages (alternatively: <a href="http://glossy.netzgesta.de/" title="glossy images">glossy.js</a>). It uses unobtrusive javascript to keep your code clean.</p><p>It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE 6+ and Safari. On older browsers, it'll degrade and your visitors won't notice a thing.</p><p><small><a href="http://lab.netzgesta.de/" title="showcase">CVI-lab</a>: Get a fast impression of the effects and their illustration qualities.</small></p></td></tr></table><h2>Setting Up</h2><p>Download "corner.js" and include it into your webpage.</p><code><script type="text/javascript" src="<tt>corner.js</tt>"></script></code><h2>Using It</h2><p>To add corners just add a class="<tt>corner</tt>" and an additonal class like "<tt>iradius16</tt>" to the image.</p><h2>Classes</h2><ul><li>Initialisation class "<tt>corner</tt>"</li><li><small><em>vary the radius by adding iradius followed by the desired <b>radius</b> in pixel:</em></small><br>Corner radius class "<tt>iradius24</tt>" - min=0 max=100 default=0</li><li><small><em>vary the shading by adding ishade followed by the desired <b>opacity</b> in percentage:</em></small><br>Image shading class "<tt>ishade50</tt>" - min=0 max=100 default=0</li><li><small><em>vary the shadow by adding ishadow followed by the desired <b>opacity</b> in percentage:</em></small><br>Image shadow class "<tt>ishadow33</tt>" - min=0 max=100 default=0</li><li><small><em>vary the shadow by adding inverse:</em></small><br>Shadow invert class "<tt>inverse</tt>"</li></ul><h2>Scripting</h2><p>If you want flexibility, use "<b>cvi_corner_lib.js</b>" instead of "<b>corner.js</b>". You can make your images respond to user actions (e.g. changing one or more options when the image is hovered over).</p><dl> <dt><strong>Set</strong> defaults using Javascript</dt> <dd> <code> cvi_corner.defaultRadius = 0; <tt>//INT 0-100 (px)</tt><br> cvi_corner.defaultShadow = 0; <tt>//INT 0-100 (% opacity)</tt><br> cvi_corner.defaultShade = 0; <tt>//INT 0-100 (% opacity)</tt><br> cvi_corner.defaultInverse = false; <tt>//BOOLEAN</tt> </code> <p></p> </dd> <dt><strong>Add</strong> images using Javascript</dt> <dd> <code>cvi_corner.add(<tt>image</tt>, <tt>options</tt>);</code><br><small> <tt>image</tt> should be an image element: document.getElementById(<b>"myimg"</b>)<br> <tt>options</tt> can contain one or more values: {<tt>radius</tt>: <b>value</b>, <tt>shadow</tt>: <b>value</b>, <tt>shade</tt>: <b>value</b>, <tt>inverse</tt>: <b>value</b>}</small>
<dl><dt>Example:</dt> <dd> <code>cvi_corner.add(document.getElementById(<b>"myimg"</b>), { <tt>shadow</tt>: <b>75</b>, <tt>shade</tt>: <b>0</b> });</code>
</dd></dl> <p></p> </dd> <dt><strong>Modify</strong> images using Javascript</dt> <dd> <code>cvi_corner.modify(<tt>image</tt>, <tt>options</tt>);</code><br> <small>If the image has already an effect but a <tt>option</tt> value has changed, the effect will be changed accordingly.</small><br> <dl><dt>Example:</dt> <dd> <code>cvi_corner.modify(document.getElementById(<b>"myimg"</b>), { <tt>radius</tt>: <b>50</b> });</code>
</dd></dl> <p></p> </dd> <dt><strong>Remove</strong> effect from an image using Javascript</dt> <dd> <code>cvi_corner.remove(<tt>image</tt>);</code> <p></p> </dd></dl>
<p><br>Alternatively use "<b>cvi_corners_lib.js</b>" instead of "<b>justcorners.js</b>".</p> <dl> <dt><strong>Set</strong> defaults using Javascript</dt> <dd> <code> cvi_corners.defaultXradius = 16; <tt>//INT 0-100 (px)</tt><br> cvi_corners.defaultYradius = 0; <tt>//INT 0-100 (px)</tt><br> cvi_corners.defaultCorners = "1111"; <tt>//STR "0000"-"1111" [top left|top right|bottom left|bottom right]</tt><br> cvi_corners.defaultBorder = 0; <tt>//INT 0-100 (px borderwidth)</tt><br> cvi_corners.defaultColor = "#0000ff"; <tt>//STR "#000000"-"#ffffff" bordercolor</tt><br> cvi_corners.defaultOpacity = 100; <tt>//INT 0-100 (% borderopacity)</tt><br> </code> <p></p> </dd> <dt><strong>Add</strong> images using Javascript</dt> <dd> <code>cvi_corners.add(<tt>image</tt>, <tt>options</tt>);</code><br><small> <tt>image</tt> should be an image element: document.getElementById(<b>"myimg"</b>)<br> <tt>options</tt> can contain one or more values: {<tt>xradius</tt>: <b>value</b>, <tt>yradius</tt>: <b>value</b>, <tt>corners</tt>: <b>value</b>}</small>
<dl><dt>Example:</dt> <dd> <code>cvi_corners.add(document.getElementById(<b>"myimg"</b>), { <tt>corners</tt>: <b>"1010"</b> });</code>
</dd></dl> <p></p> </dd> <dt><strong>Modify</strong> images using Javascript</dt> <dd> <code>cvi_corners.modify(<tt>image</tt>, <tt>options</tt>);</code><br> <small>If the image has already an effect but a <tt>option</tt> value has changed, the effect will be changed accordingly.</small><br>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -