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

最新推荐文章于 2021-05-31 21:41:37 发布

wj603201

最新推荐文章于 2021-05-31 21:41:37 发布

阅读量319

点赞数

分类专栏： JavaScript 文章标签： IE HTML

本文链接：https://blog.csdn.net/wj603201/article/details/83458045

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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);
}

wj603201

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中使用DOM-Drag实现移动蒙版效果

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

扫一扫