📄 index.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Glossy.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="Glossy.js" href="http://www.netzgesta.de/glossy/"> <meta name="Author" lang="en" content="glossy.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="Glossy.js 1.4 allows you to add corners (and also shading and shadow) to images on your webpages through unobtrusive javascript">
<meta name="Keywords" lang="en" content="glossy.js,images,corners,shading,shadow,unobtrusive javascript,Mozilla,Firefox,Opera,Safari">
<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="glossy.js"></script>
<style type="text/css">
a { color: blue; font-style:italic; text-decoration:none; }tt {color: green;}b {color: #993333;}
body { background: url(images/backgrnd.jpg); 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"><img src="images/glossy.png" border="0" class="glossy" alt="glossy.js"></td><td style="padding: 0 0 0 15px; margin: 0; line-height: 1.5; font-style: italic;"><p><strong>Glossy.js 1.4</strong> allows you to add corners and shading and shadow to images on your webpages (alternatively: <a href="http://corner.netzgesta.de/">corner.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+, Safari and IE6+. 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 "glossy.js" and include it into your webpage.</p><code><script type="text/javascript" src="<tt>glossy.js</tt>"></script></code><h2>Using It</h2><p>To make it glossy just add a class="<tt>glossy</tt>" to the image <em>(minimum dimension: 16x16)</em>.</p><h2>Classes</h2><ul><li>Initialisation class "<tt>glossy</tt>"</li><li><small><em>vary the radius by adding iradius followed by the desired <b>radius</b> in percentof half of the smaller picture dimension:</em></small><br>Corner radius class "<tt>iradius25</tt>" - min=20 max=50 default=25</li><li><small><em>vary the shadow by adding noshadow:</em></small><br>Noshadow class "<tt>noshadow</tt>" - default=false</li><li><small><em>vary the background by adding ibgcolor followed by the desired <b>color</b> as hex:</em></small><br>Background color class "<tt>ibgcolor</tt>" - min=000000 max=ffffff default=0</li><li><small><em>vary the background by adding igradient followed by the desired <b>color</b> as hex:</em></small><br>Gradient color class "<tt>igradient</tt>" - min=000000 max=ffffff default=0</li><li><small><em>vary the color gradient direction by adding horizontal:</em></small><br>Horizontal gradient class "<tt>horizontal</tt>" - default=false</li></ul><h2>Scripting</h2><p>If you want flexibility, use "<b>cvi_glossy_lib.js</b>" instead of "<b>glossy.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_glossy.defaultRadius = 25; <tt>//INT 20-50 (%)</tt><br> cvi_glossy.defaultColor = 0; <tt>//STR '#000000'-'#ffffff' or 0</tt><br> cvi_glossy.defaultColor2 = 0; <tt>//STR '#000000'-'#ffffff' or 0</tt><br> cvi_glossy.defaultGradient = 'v'; <tt>//STR 'd|h|v'-'diagonally|horizontal|vertical'</tt><br> cvi_glossy.defaultShade = 50; <tt>//INT 20-66 (% opacity)</tt><br> cvi_glossy.defaultShadow = 40; <tt>//INT 0-100 (% opacity)</tt><br> cvi_glossy.defaultNoshadow = false; <tt>//BOOLEAN</tt><br> cvi_glossy.defaultNoradius = false; <tt>//BOOLEAN</tt> </code> <p></p> </dd> <dt><strong>Add</strong> images using Javascript</dt> <dd> <code>cvi_glossy.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>color</tt>: <b>value</b>, <tt>color2</tt>: <b>value</b>, <tt>gradient</tt>: <b>value</b>, <tt>noshadow</tt>: <b>value</b>, <tt>noradius</tt>: <b>value</b>}</small>
<dl><dt>Example:</dt> <dd> <code>cvi_glossy.add(document.getElementById(<b>"myimg"</b>), { <tt>shadow</tt>: <b>75</b>, <tt>shade</tt>: <b>20</b> });</code>
</dd></dl> <p></p> </dd> <dt><strong>Modify</strong> images using Javascript</dt> <dd> <code>cvi_glossy.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_glossy.modify(document.getElementById(<b>"myimg"</b>), { <tt>radius</tt>: <b>24</b> });</code>
</dd></dl> <p></p> </dd> <dt><strong>Remove</strong> effect from an image using Javascript</dt> <dd> <code>cvi_glossy.remove(<tt>image</tt>);</code> <p></p> </dd></dl>
</div><h2>Demonstration</h2>
<p style="clear: left">Shows some of the things "glossy.js" does.<br> 6 images with class = "<tt>glossy iradius50</tt>"</p><div class="demo"><img src="images/0.jpg" class="glossy iradius50" alt="" /></div>
<div class="demo"><img src="images/1.jpg" class="glossy iradius50" alt="" /></div>
<div class="demo"><img src="images/2.jpg" class="glossy iradius50" alt="" /></div>
<div class="demo"><img src="images/3.jpg" class="glossy iradius50" alt="" /></div>
<div class="demo"><img src="images/4.jpg" class="glossy iradius50" alt="" /></div>
<div class="demo"><img src="images/5.jpg" class="glossy iradius50" alt="" /></div><p style="clear: left;"></p><p style="clear: left"> Empty gif with class = "<tt>glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow</tt>"</p><div class="demo"><img src="images/space.gif" width="700" height="16" class="glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow" title="tooltip support" alt="" /></div>
<p style="clear: left;"></p><p style="clear: left"> 3 images with class = "<tt>glossy</tt>"</p><div class="demo"><img src="images/example.jpg" class="glossy" title="onClick event" onClick="alert('Glossy dimension '+this.width+'x'+this.height);" alt="" /></div>
<div class="demo"><img src="images/example.jpg" style="width: 200px; height: 135px;" class="glossy" title="onClick event" onClick="alert('ALT=\''+this.alt+'\'');" alt="beautiful landscape" /></div><div class="demo"><img src="images/example.jpg" style="width: 150px; height: 101px;" class="glossy" title="onClick event" onClick="alert('ID='+this.id);" id="landscape_image" alt="" /></div><p style="clear: left;"></p><h2>Why use Javascript Image Glossy?</h2><ul><li>Fast and easy to implement. Just add class="glossy" to the image and your good to go.</li><li>Don't need to spend time in an image editor creating images with effects.</li><li>Works really well with forum avatars. Doesn't require additional server work.</li><li>It's dead easy to change the attributes of the images.</li><li>Free of charge use on non-commercial and private web sites.</li></ul><p>In older browsers, the script degrades and your visitors won't notice a thing.</p><h2>Restrictions</h2><p>Opera do not support printing of canvas.</p><h2>History</h2>Version 1.4<ul><li>Added scriptable lib version <b>cvi_glossy_lib.js</b></li></ul>Version 1.3<ul><li>Added support for img attributes:<br /><tt>id alt title src onclick</tt></li></ul>Version 1.2<ul><li>Added soft shadows for IE</li></ul>Version 1.1<ul><li>Added support for Internet Explorer 6/7</li></ul>Version 1.0<ul><li>Initial Release</li></ul><h2>License</h2><p>Glossy.js is distributed under this <a href="LICENSE.txt">LICENSE</a>. License permits free of charge use on non-commercial and private web sites only. <br>There is also a <a href="mailto:info@netzgesta.de">Commercial Software License</a> available.</p><p><strong>Images used are copyrighted and are used for demonstration only.</strong></p><p><a href="http://cvi.netzgesta.de/">cvi.netzgesta.de</a> also visit <a href="http://lab.netzgesta.de/">CVI-lab</a>, <a href="http://s5.netzgesta.de/">S5 Reloaded</a> and <a href="http://ajaxfilmdb.sourceforge.net/">AJAX-FilmDB</a></p></body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -