| (22) | |
| (6) | |
| (506) | |
| (220) | |
| (23) | |
| (351) | |
| (46) |
Image Reflection 是针对 Joomla! 1.5 平台的一个文章内容插件,它的功能就是给文章中的插图产生倒影(Reflection)效果。
这个插件没有参数,安装之后直接启用即可。不过,要想图片显示倒影,必须在插入图像时给图像设定特殊的 CSS 类。
Image Reflection 的作者在插件说明中详细描述了几种不同的倒影效果,用户通过使用不同的标记语法,可以实现下列效果:
彩色背景
倒影将渐隐融入背景颜色。
标记语法:
<div style="float: left; background-color: yellow; padding: 10px;">
<img src="example.jpg" class="reflect" />
</div>
高度可变
借助 CSS 类属性,倒影的高度可以变化。在标记语法中,使用 "rheight20" 这个类就表示倒影高度相当于图像高度的 20%。
标记语法:
<div style="float: left; padding: 10px;"><img src="example.jpg" class="reflect rheight20" /></div>
透明度可变
标记语法:
<div style="float: left; padding: 10px;"><img src="example.jpg" class="reflect ropacity20" /></div>
指定图像对齐方式并带边框
图像及其倒影应该在页面上靠右对齐。边框包围图像和倒影。
标记语法:
<img src="example.jpg" class="reflect" style="float: right; border: solid 5px red;" />
使用程序实现倒影
这种倒影效果不是用图像的 class="reflect" 属性实现的,而是使用 Reflection.add() 函数实现。
这种倒影有个效果就是:当鼠标指向图像时倒影亮度增大。
标记语法:
<img src="example.jpg"
onmouseover="Reflection.add(this, { opacity: 2/3 });"
onmouseout="Reflection.add(this, { opacity: 1/3 });"
class="reflect ropacity33" />
<img src="example.jpg" id="sorbohax"
onclick="Reflection.add(this, { height: 1/3, opacity: 2/3 });" />
<a href="javascript:Reflection.remove(document.getElementById('sorbohax'))">Remove Reflection</a>
图像缩放
这个效果在 Internet Explorer 浏览器中可能有问题。
标记语法:
<img src="example.jpg" width="200" alt="" class="reflect" />
图像可点击
标记语法:
<a href="http://cow.neondragon.net/stuff/reflection/"><img src="example.jpg" alt="" class="reflect" /></a>

| 白建鹏 | 170 |
| ㊣寂寞沙洲冷 | 21 |
| Evan | 8 |
| 歌笑填鸭 | 7 |
| lhping | 6 |