📄 index.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Reflex.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="Reflex.js" href="http://www.netzgesta.de/reflex/"> <meta name="Author" lang="en" content="reflex.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="Reflex.js 1.2 allows you to add an cover flow effect (including reflection) to images on your webpages through unobtrusive javascript">
<meta name="Keywords" lang="en" content="reflex.js,images,tilt,3d,border,opacity,reflection,cover flow effect,unobtrusive javascript,Mozilla,Firefox,Opera,Safari">
<meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="reflex.js"></script> <meta http-equiv="Content-Style-Type" content="text/css"><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) silver; color: black; font-family: Georgia,serif; line-height: 1.5; margin: 2em 2em;}
h2 { line-height: 1; }.demo { float: left; padding: 10px; }.logo { position: relative; width: 480px; white-space: nowrap;}#guru { padding: 4px; width: 99%; height: auto; text-align: center; background-color: black; }#guru div { 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; }#header { margin-bottom: 0; font-weight: normal; font-style: italic; color: gray; }.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><strong>Guru Meditation</strong> - With deactivated JavaScript: Images stay unmodified!</div></div></noscript><table summary=""><tr><td valign="top" style="padding-top: 0.5em"><div class="logo"><img src="images/apple.jpg" width="100" class="reflex idistance4 iopacity50" style="margin-left: -10px" alt="" /><img src="images/day.jpg" width="100" class="reflex itiltright idistance4 iopacity50" style="margin-left: -5px" alt="" /><img src="images/keeps.jpg" width="100" class="reflex itiltnone idistance4 iopacity50" style="margin: 0 0px 0 -0px" alt="" /><img src="images/doctor.jpg" width="100" class="reflex idistance4 iopacity50" alt="" style="" /><img src="images/away.jpg" width="100" class="reflex itiltleft idistance4 iopacity50" style="margin: 0 -10px 0 -5px" alt="" /></div></td><td style="padding: 0 0 0 15px; margin: 0; line-height: 1.5; font-style: italic;"><p><strong>Reflex.js 1.2</strong> allows you to add a Cover Flow<sup>™</sup> effect (including reflection) to images on your webpages. <small><i>*Cover Flow is a trademark of Apple Inc.</i></small>. 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 "reflex.js" and include it into your webpage.</p><code><script type="text/javascript" src="<tt>reflex.js</tt>"></script></code><h2>Using It</h2><p>To get the effect just add a class="<tt>reflex</tt>" to the image <em>(minimum dimension: 32x32)</em>.<small><br>The needed vertical space of the canvas element will grow by the height of the reflection, plus the height of the distance.</small></p><h2>Classes</h2><ul><li>Initialisation class "<tt>reflex</tt>"</li><li><small><em>vary the reflection by adding idistance followed by the desired <b>height</b> in pixel:</em></small><br>Reflection distance class "<tt>idistance</tt>" - min=0 max=100 default=0</li><li><small><em>vary the reflection by adding iheight followed by the desired <b>height</b> in percent:</em></small><br>Reflection height class "<tt>iheight</tt>" - min=10 max=100 default=33</li><li><small><em>vary the reflection by adding iopacity followed by the desired <b>opacity</b> in percent:</em></small><br>Reflection opacity class "<tt>iopacity</tt>" - min=0 max=100 default=33</li><li><small><em>vary the border by adding iborder followed by the desired <b>wide</b> in pixel:</em></small><br>Border wide class "<tt>iborder</tt>" - min=0 max=100 default=0</li><li><small><em>vary the border by adding icolor followed by the desired <b>color</b> as hex:</em></small><br>Border color class "<tt>icolor</tt>" - min=000000 max=ffffff default=f0f4ff</li><li><small><em>vary the 3D Z-Tilt direction by adding one of the following:</em></small><br>Z-Tilt direction class "<tt>itiltright</tt>" or "<tt>itiltnone</tt>" or "<tt>itiltleft</tt>"<br>by default "reflex.js" cycles through [right|none|left].</li></ul><h2>Scripting</h2><p>If you want flexibility, use "<b>cvi_reflex_lib.js</b>" instead of "<b>reflex.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_reflex.defaultTilt = 'none'; <tt>//STR 'n|l|r'-'none|left|right'</tt><br> cvi_reflex.defaultHeight = 33; <tt>//INT 10-100 (%)</tt><br> cvi_reflex.defaultDistance = 0; <tt>//INT 0-100 (px)</tt><br> cvi_reflex.defaultTransparency = 50; <tt>//INT 1-100 (%)</tt><br> cvi_reflex.defaultBorder = 0; <tt>//INT 0-20 (px)</tt><br> cvi_reflex.defaultColor = '#ffffff'; <tt>//STR '#000000'-'#ffffff'</tt><br> cvi_reflex.defaultBoxmode = false; <tt>//BOOLEAN</tt> </code> <p></p> </dd> <dt><strong>Add</strong> images using Javascript</dt> <dd> <code>cvi_reflex.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>tilt</tt>: <b>value</b>, <tt>height</tt>: <b>value</b>, <tt>distance</tt>: <b>value</b>, <tt>transparency</tt>: <b>value</b>, <tt>border</tt>: <b>value</b>, <tt>color</tt>: <b>value</b>, <tt>boxmode</tt>: <b>value</b>}</small>
<dl><dt>Example:</dt> <dd> <code>cvi_reflex.add(document.getElementById(<b>"myimg"</b>), { <tt>height</tt>: <b>25</b>, <tt>distance</tt>: <b>10</b> });</code>
</dd></dl> <p></p> </dd> <dt><strong>Modify</strong> images using Javascript</dt> <dd> <code>cvi_reflex.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_reflex.modify(document.getElementById(<b>"myimg"</b>), { <tt>tilt</tt>: <b>"left"</b> });</code>
</dd></dl> <p></p> </dd> <dt><strong>Remove</strong> effect from an image using Javascript</dt> <dd> <code>cvi_reflex.remove(<tt>image</tt>);</code> <p></p> </dd></dl><h2>Demonstration</h2><p style="clear: left">Shows some of the things "reflex.js" does.<small><br><br>First 3 images with class "<tt>reflex</tt>" only, last 3 with "<tt>idistance?? iheight?? iopacity?? iborder? icolor??????</tt>" ...</small></p><div class="demo"><img src="images/test.jpg" width="200" class="reflex itiltright" alt="" /></div><div class="demo"><img src="images/test.jpg" width="200" class="reflex" alt="" /></div><div class="demo"><img src="images/test.jpg" width="200" class="reflex" alt="" /></div><p style="clear: left;"></p><div class="demo"><a href="images/left.jpg"><img src="images/left.jpg" width="200" class="reflex iopacity50" alt="" /></a><small><br>"<tt>reflex iopacity50</tt>"</small></div><div class="demo"><a href="images/none.jpg"><img src="images/none.jpg" width="200" class="reflex iopacity75" alt="" /></a><small><br>"<tt>reflex iopacity75</tt>"</small></div><div class="demo"><a href="images/right.jpg"><img src="images/right.jpg" width="200" class="reflex iopacity25" alt="" /></a><small><br>"<tt>reflex iopacity25</tt>"</small></div><p style="clear: left;"></p><div class="demo"><img src="images/example.jpg" width="200" class="reflex idistance16 iborder2 iheight24" onClick="alert('Image dimension '+this.width+'x'+this.height);" title="onClick event" alt="" /></div><div class="demo"><img src="images/example.jpg" width="200" class="reflex idistance0 iborder8 iheight40 icolorffffff" onClick="alert('ALT=\''+this.alt+'\'');" alt="landscape" /></div><div class="demo"><img src="images/example.jpg" width="200" class="reflex idistance8 iborder1 iheight32 icolor0070a4" onClick="alert('TITLE=\''+this.title+'\'');" title="beautiful landscape" alt="" /></div><p style="clear: left;"><small><em>Images used are copyrighted and are used for demonstration only.</em></small></p><h2>Why use Javascript Reflex Image?</h2><ul><li>Fast and easy to implement. Just add class="<tt><?=$theme ?></tt>" to the image and your good to go.</li><li>Don't need to spend time in an image editor creating an Cover Flow<sup>™</sup> image effect.<br><small><i>*Cover Flow is a trademark of Apple Inc.</i></small>.</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.2<ul><li>Added scriptable lib version <b>cvi_reflex_lib.js</b></li></ul>Version 1.1<ul><li>Added IE support for <tt>itiltleft</tt> and <tt>itiltright</tt></li></ul>Version 1.0<ul><li>Initial Release</li><li>Added support for Internet Explorer 6/7<br>(<tt>itiltleft</tt> and <tt>itiltright</tt> is still missing)</li></ul><h2>Credits</h2><p>The inspiration for the script came from apples <a href="http://www.apple.com/macosx/leopard/features/finder.html">Cover Flow</a><sup>™</sup>.</p><h2>License</h2><p>Reflex.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. There are also <a href="mailto:cvi@netzgesta.de">Commercial Software Licenses</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 + -