📄 index.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Bevel.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="Bevel.js" href="http://www.netzgesta.de/bevel/"> <meta name="Author" lang="en" content="bevel.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="Bevel.js 1.2 allows you to add bevels (and also shading, shining and glowing) to images on your webpages through unobtrusive javascript">
<meta name="Keywords" lang="en" content="bevel.js,images,corners,bevels,shading,shining,glowing,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="bevel.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/bevel.jpg" border="0" class="bevel usemask islinear iradius30 iglowcolffeecc ishinecolffffff ishadecol000000 ibackcolBD8246 ifillcolDF954A iglowopac66 ishineopac50 ishadeopac60" alt="bevel.js"></td><td style="padding: 0 0 0 15px; margin: 0; line-height: 1.5; font-style: italic;"><p><strong>Bevel.js 1.2</strong> allows you to add bevels (and also shading, shining and glowing) to images on your webpages (alternatively: <a href="http://glossy.netzgesta.de/">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+, 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 "bevel.js" and include it into your webpage.</p><code><script type="text/javascript" src="<tt>bevel.js</tt>"></script></code><h2>Using It</h2><p>To make it bevel just add a class="<tt>bevel</tt>" to the image.</p><h2>Classes</h2><ul><li>Initialisation class "<tt>bevel</tt>"</li><li><small><em>vary the radius by adding iradius followed by the desired <b>radius</b> in percent:</em></small><br>Image radius class "<tt>iradius20</tt>" - min=20 max=40 default=20</li><li><small><em>vary the masking by adding usemask:</em></small><br>Image masking class "<tt>usemask</tt>"</li><li><small><em>vary the masking by adding ibackcol followed by the <b>color</b>:</em></small><br>Mask color class "<tt>ibackcol</tt>" - min=000000 max=ffffff default=0080ff</li><li><small><em>vary the masking by adding ifillcol followed by the <b>color</b>:</em></small><br>Mask color class "<tt>ifillcol</tt>" - min=000000 max=ffffff default=ibackcol</li><li><small><em>vary the glowing by adding noglow:</em></small><br>Image glowing class "<tt>noglow</tt>"</li><li><small><em>vary the glowing by adding iglowopac followed by the desired <b>opacity</b> in percent:</em></small><br>Glow opacity class "<tt>iglowopac</tt>" - min=1 max=100 default=33</li><li><small><em>vary the glowcolor by adding iglowcol followed by the <b>color</b>:</em></small><br>Glow color class "<tt>iglowcol</tt>" - min=000000 max=ffffff default=000000</li><li><small><em>vary the shining by adding noshine:</em></small><br>Image shining class "<tt>noshine</tt>"</li><li><small><em>vary the shining by adding ishineopac followed by the desired <b>opacity</b> in percent:</em></small><br>Shine opacity class "<tt>ishineopac</tt>" - min=1 max=100 default=40</li><li><small><em>vary the shinecolor by adding ishinecol followed by the <b>color</b>:</em></small><br>Shine color class "<tt>ishinecol</tt>" - min=000000 max=ffffff default=ffffff</li><li><small><em>vary the shading by adding noshade:</em></small><br>Image shading class "<tt>noshade</tt>"</li><li><small><em>vary the shading by adding ishadeopac followed by the desired <b>opacity</b> in percent:</em></small><br>Shade opacity class "<tt>ishadeopac</tt>" - min=1 max=100 default=50</li><li><small><em>vary the shading by adding islinear:</em></small><br>Shade gradient class "<tt>islinear</tt>"</li><li><small><em>vary the shadecolor by adding ishadecol followed by the <b>color</b>:</em></small><br>Shade color class "<tt>ishadecol</tt>" - min=000000 max=ffffff default=000000</li></ul><h2>Scripting</h2><p>If you want flexibility, use "<b>cvi_bevel_lib.js</b>" instead of "<b>bevel.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_bevel.defaultRadius = 20; <tt>//INT 20-40 (%)</tt><br> cvi_bevel.defaultGlow = 33; <tt>//INT 1-100 (% opacity)</tt><br> cvi_bevel.defaultShine = 40; <tt>//INT 1-100 (% opacity)</tt><br> cvi_bevel.defaultShade = 50; <tt>//INT 1-100 (% opacity)</tt><br> cvi_bevel.defaultGlowcolor = '#000000'; <tt>//STR '#000000'-'#ffffff'</tt><br> cvi_bevel.defaultShinecolor = '#ffffff'; <tt>//STR '#000000'-'#ffffff'</tt><br> cvi_bevel.defaultShadecolor = '#000000'; <tt>//STR '#000000'-'#ffffff'</tt><br> cvi_bevel.defaultBackcolor = '#0080ff'; <tt>//STR '#000000'-'#ffffff'</tt><br> cvi_bevel.defaultFillcolor = '#0080ff'; <tt>//STR '#000000'-'#ffffff'</tt><br> cvi_bevel.defaultLinear = false; <tt>//BOOLEAN</tt><br> cvi_bevel.defaultUsemask = false; <tt>//BOOLEAN</tt><br> cvi_bevel.defaultNoglow = false; <tt>//BOOLEAN</tt><br> cvi_bevel.defaultNoshine = false; <tt>//BOOLEAN</tt><br> cvi_bevel.defaultNoshade = false; <tt>//BOOLEAN</tt> </code> <p></p> </dd> <dt><strong>Add</strong> images using Javascript</dt> <dd> <code>cvi_bevel.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>glow</tt>: <b>value</b>, <tt>shine</tt>: <b>value</b>, <tt>shade</tt>: <b>value</b>, <tt>glowcolor</tt>: <b>value</b>, <tt>shinecolor</tt>: <b>value</b>, <tt>shadecolor</tt>: <b>value</b>, <tt>backcolor</tt>: <b>value</b>, <tt>fillcolor</tt>: <b>value</b>, <tt>linear</tt>: <b>value</b>, <tt>noglow</tt>: <b>value</b>, <tt>noshine</tt>: <b>value</b>, <tt>noshade</tt>: <b>value</b>, <tt>usemask</tt>: <b>value</b> }</small>
<dl><dt>Example:</dt> <dd> <code>cvi_bevel.add(document.getElementById(<b>"myimg"</b>), { <tt>shine</tt>: <b>75</b>, <tt>shade</tt>: <b>10</b> });</code>
</dd></dl> <p></p> </dd> <dt><strong>Modify</strong> images using Javascript</dt> <dd> <code>cvi_bevel.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_bevel.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_bevel.remove(<tt>image</tt>);</code> <p></p> </dd></dl>
</div><h2>Demonstration</h2>
<p style="clear: left">Shows some of the things "bevel.js" does.</p><div class="demo"><img src="images/example.jpg" class="bevel iradius40 noglow noshade noshine" alt="" /></div>
<div class="demo"><img src="images/example.jpg" class="bevel iradius30 noshade noshine" alt="" /></div><div class="demo"><img src="images/example.jpg" class="bevel noshine" alt="" /></div><div class="demo"><img src="images/example.jpg" class="bevel noshade" alt="" /></div><div class="demo"><img src="images/example.jpg" class="bevel islinear" alt="" /></div>
<div class="demo"><img src="images/example.jpg" class="bevel usemask iglowcolffffff iglowopac66 ishadecolffffff ibackcol00ccff ifillcol00aa66" alt="" /></div>
<div class="demo"><img src="images/candy.jpg" class="bevel islinear iglowopac50 ishadeopac75 iglowcolffcc00 ishadecolffcc00" alt="" /></div><div class="demo"><img src="images/candy.jpg" class="bevel usemask noshine noshade iglowopac50 iglowcol00cc00 ibackcolffaa00 ifillcolffff00" alt="" /></div><div class="demo"><img src="images/candy.jpg" class="bevel noshine islinear ishadeopac100 iglowcolff66ff ishadecolffffff" title="tooltip support" alt="candy" /></div>
<div class="demo"><img src="images/candy.jpg" class="bevel usemask iglowopac50 ishadeopac100 iglowcolffffff ishineopac50 ishadecolffffff ibackcolffffff" title="onClick event" onClick="alert('image dimension '+this.width+'x'+this.height);" alt="" /></div><div class="demo"><img src="images/candy.jpg" class="bevel usemask iradius30 ishadecolffffff ibackcol000000" title="onClick event" onClick="alert('ALT=\''+this.alt+'\'');" alt="candy" /></div>
<div class="demo"><img src="images/candy.jpg" class="bevel islinear iradius40" title="onClick event" onClick="alert('ID='+this.id);" id="candy" alt="" /></div><p style="clear: left;"></p><h2>Why use Javascript Image Bevels?</h2><ul><li>Fast and easy to implement. Just add class="bevel" 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>History</h2>Version 1.2<ul><li>FF rendering bug removed</li></ul>Version 1.1<ul><li>IE rendering bug removed</li></ul>Version 1.0<ul><li>Initial Release</li></ul><h2>License</h2><p>Bevel.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 under special conditions <em>(as described in the license)</em>. This license equals neither "<span style="text-decoration: line-through;">open source</span>" nor "<span style="text-decoration: line-through;">public domain</span>". There are also <a href="mailto:cvi@netzgesta.de">Commercial Software Licenses</a> available.</p><h6>YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.<br>IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.</h6><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 + -