JS中使用DOM-Drag实现移动蒙版效果

wj603201

浏览: 62453 次
性别:
来自: 北京

最近访客更多访客>>

xsy1994

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

IE HTML

JS中使用DOM-Drag实现移动蒙版效果
1.将一个白色图片设置半透明作为蒙版；
2.使用Drag.init(o, oroot, minX, maxX, minY, maxY);将一个小透明图片作为子组件，半透明图片作为父组件；
3.拖动透明图片带动蒙版一起移动；
4.只有IE支持蒙版效果。

DOMDragEx8.html:
程序代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>DOM-Drag ex8</title>
        <script type="text/javascript" src="js/dom-drag.js"></script>
        <script type="text/javascript" src="js/DOMDragEx8.js"></script>
        <style type="text/css">
            #all {
                position:absolute;
                width:300px;
                height:300px;
            }

            #root {
                position:absolute;

            }

            #handle {
                position:absolute;
                width:100px;
                height:100px;
            }

            #sel {
                position:absolute;
                filter:alpha(opacity=60);
            }

            #msg {
                width:295px;
            }
        </style>
    </head>
    <body>
        <div id="all" style="top:20px;left:20px;">
            <img id="bg" src="images/bg.jpg" />
            <div id="root" style="top:-250px;left:-250px;">
                <img id="sel" src="images/selection.gif" style="top:0px;left:0px;" />
                <img id="handle" src="images/x.gif" style="top:250px;left:250px;" />
            </div>
            <form action="">
                <input id="msg" readonly="readonly" />
            </form>
        </div>
    </body>
</html>

DOMDragEx8.js:
程序代码

window.onload = function() {
    var handle = document.getElementById("handle");
    var root = document.getElementById("root");
    Drag.init(handle, root, -250, -50, -250, -50);

    root.onDrag = function(x, y) {
        reportDrag(x, y);
    }

    function reportDrag(x, y) {
        var msg = document.getElementById("msg");
        msg.value = " X = " + (x + 250) + "; Y = " + (y + 250) + "; W = " + handle.width + "; H = " + handle.height;
    }

    root.onDrag(-250, -250);
}

分享到：