倒影特效
利用JavaScript可以实现一般图片处理工具的倒影特效。效果图可见下：
可以见到loli玉腿粉呈，宛如水中倒影。
实现思路有二，一是先在图片下方添加一个<div>元素，作为倒影容器，然后在容器中添加若干个高度为1PX的<div>元素，其中含有一个与原图相同的<img>元素，设置该元素margin-top属性，使其显示原图中某个高度位置的局部内容。最后设置倒影中每一个1PX高的<DIV>元素的opacity属性，从而实现倒影的渐变效果。
详细代码如下：
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1</title>
<script type="text/javascript">
function init() {setReflect("pic");}
function $(id) {return document.getElementById(id);}
function isIE() {return window.ActiveXObject?true:fasle;}
function insertAfter(newNode, refNode) {
if (refNode.nextSibling) {
refNode.parentNode.insertBefore(newNode,refNode.nextSibling);
} else {
refNode.parentNode.appendChild(newNode);
}
}
function setReflect(img_id) {
var amount = 1/3, opacity = 1/3;
var img = $(img_id);
var src = img.src;
var img_height = img.offsetHeight;
var reflect_height = Math.floor(img_height*amount);
var reflect_div = document.createElement("div");
reflect_div.id = "reflect_div";
insertAfter(reflect_div,img);
reflect_div = $("reflect_div");
var html = "", newHTML;
var ie = isIE();
for (var i=0; i<reflect_height; i++) {
var img_opacity = (reflect_height-i)*opacity/reflect_height;
if (ie) img_opacity *= 100;
var margin_top = img_height -i -1;
if (ie) {
newHTML = "<div style='filter:alpha(opacity=" + img_opacity +
"); overflow: hidden; height:1px'><img style='margin-top: -" +
margin_top + "px' src='" + src + "'></div>";
}
else {
newHTML = "<div style='opacity: " + img_opacity +
"; overflow: hidden; height:1px'><img style='margin-top: -" +
margin_top + "px' src='" + src + "'></div>";
}
html += newHTML;
}
reflect_div.innerHTML = html;
}
</script>
</head>
<body onload="init()">
<img id="pic" src="loli.jpg" alt="reflector">
</body>
</html>
这种方法效率不是很高，第二种方式利用CSS的滤镜功能，可以提升很大效率，但只适用于IE浏览器。
详细代码如下：
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2</title>
<script language="javascript" type="text/javascript">
function init() {setReflect("pic");}
function $(id) {return document.getElementById(id);}
function insertAfter(newNode, refNode) {
if (refNode.nextSibling) {
refNode.parentNode.insertBefore(newNode,refNode.nextSibling);
} else {
refNode.parentNode.appendChild(newNode);
}
}
function setReflect(img_id) {
var amount = 1/2, opacity = 1/3;
var img = $(img_id);
var src = img.src;
var img_height = img.offsetHeight;
var reflect_height = Math.floor(img_height*amount);
var reflect_div = document.createElement("div");
reflect_div.id = "reflect_div";
insertAfter(reflect_div,img);
reflect_div = $("reflect_div");
var html = "";
html = "<img height='400px' style='border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;"
+ "filter: flipv progid:DXImageTransform.Microsoft.Alpha(opacity=60"
+ ", style=1,finishOpacity=0,startx=0,starty=0,finishx=0,finishy="
+ amount*100 + ");' src='" + src + "'>";
reflect_div.innerHTML = html;
}
</script>
</head>
<body onload="init()">
<img id="pic" src="loli.jpg" alt="reflector" height="400px"
style="border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;">
</body>
</html>
