这篇文章主要介绍了 JS 实现动态移动层及拖动浮层关闭的方法, 可实现动态拖动浮动窗口及关闭窗口的功能, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 JS 实现动态移动层及拖动浮层关闭的方法。分享给大家供大家参考。具体实现方法如下:
- <html>
- <head>
- <title>
- 动态移动的层
- </title>
- <body bgcolor="#ADBAC9">
- <div id="div1" class="yellow" style="VISIBILITY:visible ;
- background-color:#FFFF00;
- position: absolute; top: 60; left: 200;
- width: 360; height: 250;
- filter: revealTrans(transition=12, 'duration=0.1)
- blendTrans(duration=0.1) ">
- <div id=title onmousedown=DIVDown( "div1") style="background-color:#30608F;padding:2px;
- font-size:13px;text-indent:5;
- color:#FFFFFF;cursor:move">
- 标题
- </div>
- <img id=close onclick=Hide(div1) style="position: absolute; right: 2; top: 2"
- border="0" src="close.gif" width="15" height="15">
- </div>
- <script language="JavaScript">
- var Obj = "none";
- var pX
- var pY document.onmousemove = DIVMove;
- document.onmouseup = DIVUp;
- function DIVDown(tag) {
- Obj = tag;
- pX = parseInt(document.all(Obj).style.left) - event.x;
- pY = parseInt(document.all(Obj).style.top) - event.y;
- }
- function DIVMove() {
- if (Obj != "none") {
- document.all(Obj).style.left = pX + event.x;
- document.all(Obj).style.top = pY + event.y;
- event.returnValue = false;
- }
- }
- function DIVUp() {
- Obj = "none";
- }
- function Hide(divid) {
- divid.filters.revealTrans.apply();
- divid.style.visibility = "hidden";
- divid.filters.revealTrans.play();
- }
- </script>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: