倒影特效

最新推荐文章于 2018-03-02 18:03:44 发布

weixin_30678349

最新推荐文章于 2018-03-02 18:03:44 发布

阅读量56

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/lolicon/archive/2009/02/04/1383810.html

版权

利用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>

转载于:https://www.cnblogs.com/lolicon/archive/2009/02/04/1383810.html

weixin_30678349

关注

0
点赞
踩
0

收藏

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

利用JavaScript可以实现一般图片处理工具的倒影特效。效果图可见下：可以见到loli玉腿粉呈，宛如水中倒影。实现思路有二，一是先在图片下方添加一个<div>元素，作为倒影容器，然后在容器中添加若干个高度为1PX的<div>元素，其中含有一个与原图相同的<img>元素，设置该元素margin-top属性，使其显示原图中某个高度位置的局部内容。最后设置...
复制链接

扫一扫