javascript 倒影效果
js实现倒影效果 我用的图片是128px * 128px, 倒影部分40px,代码如下
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>shadow</title>
<style type="text/css">
.shadow{
position:relative;
float:left;
margin-right:30px;
width:128px;
height:169px;
}
.onePx{
overflow:hidden;
position:absolute;
left:0;
height:1px;
font-size:0;
}
.imgDiv{
width:128px;
height:128px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function setShadow () {
var oAllElements = document.getElementsByTagName("div");
for (var i = 0; i < oAllElements.length; i++) {
var className = oAllElements[i].getAttribute("class") ||
oAllElements[i].getAttribute("className");
if (className == "shadow") {
var sImgSrc = oAllElements[i].getElementsByTagName("img")[0].getAttribute("src");
for (var j = 0, o = 80; j < 40; j++, o -= 2) {
oAllElements[i].innerHTML += "<div class='onePx' style='top:" + (128 + j) + "px;filter:alpha(opacity=" + o + ");-moz-opacity:" + o/100 + ";opacity:" + o/100 + "'>" +
"<div class='imgDiv' style='margin-top:" + (-128 + j) + "px; background:url(" + sImgSrc + ")'></div>" +
"</div>";
}
}
}
}
window.onload = function () {
setShadow();
}
//]]>
</script>
</head>
<body>
<div class="shadow">
<img src="http://u.redocn.com/attachment/200905/12/622211_1242101365Zf3n.jpg" alt="" />
</div>
<div class="shadow">
<img src="http://u.redocn.com/attachment/200905/12/622211_1242101357UZzH.jpg" alt="" />
</div>
<div class="shadow">
<img src="http://u.redocn.com/attachment/200905/12/622211_1242101366CLbk.jpg" alt="" />
</div>
<div class="shadow">
<img src="http://u.redocn.com/attachment/200905/12/622211_1242101364D6TH.jpg" alt="" />
</div>
</body>
</html>
实现原理就是用n个高为1px的div组合而
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>shadow</title>
<style type="text/css">
.shadow{
position:relative;
float:left;
margin-right:30px;
width:128px;
height:169px;
}
.onePx{
overflow:hidden;
position:absolute;
left:0;
height:1px;
font-size:0;
}
.imgDiv{
width:128px;
height:128px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function setShadow () {
var oAllElements = document.getElementsByTagName("div");
for (var i = 0; i < oAllElements.length; i++) {
var className = oAllElements[i].getAttribute("class") ||
oAllElements[i].getAttribute("className");
if (className == "shadow") {
var sImgSrc = oAllElements[i].getElementsByTagName("img")[0].getAttribute("src");
for (var j = 0, o = 80; j < 40; j++, o -= 2) {
oAllElements[i].innerHTML += "<div class='onePx' style='top:" + (128 + j) + "px;filter:alpha(opacity=" + o + ");-moz-opacity:" + o/100 + ";opacity:" + o/100 + "'>" +
"<div class='imgDiv' style='margin-top:" + (-128 + j) + "px; background:url(" + sImgSrc + ")'></div>" +
"</div>";
}
}
}
}
window.onload = function () {
setShadow();
}
//]]>
</script>
</head>
<body>
<div class="shadow">
<img src="http://u.redocn.com/attachment/200905/12/622211_1242101365Zf3n.jpg" alt="" />
</div>
<div class="shadow">
<img src="http://u.redocn.com/attachment/200905/12/622211_1242101357UZzH.jpg" alt="" />
</div>
<div class="shadow">
<img src="http://u.redocn.com/attachment/200905/12/622211_1242101366CLbk.jpg" alt="" />
</div>
<div class="shadow">
<img src="http://u.redocn.com/attachment/200905/12/622211_1242101364D6TH.jpg" alt="" />
</div>
</body>
</html>
实现原理就是用n个高为1px的div组合而
