javascript 倒影效果

最新推荐文章于 2021-12-09 09:54:07 发布

weixin_30539625

最新推荐文章于 2021-12-09 09:54:07 发布

阅读量171

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/zouhaijian/archive/2009/09/22/1572018.html

版权

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组合而

转载于:https://www.cnblogs.com/zouhaijian/archive/2009/09/22/1572018.html

weixin_30539625

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 倒影效果

js实现倒影效果我用的图片是128px * 128px, 倒影部分40px,代码如下Code<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999...
复制链接

扫一扫