JS实现动态移动层及拖动浮层关闭的方法


Posted in Javascript onApril 30, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Javascript调用XML制作连动下拉列表框
Jun 25 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
javascript的内存管理详解
Aug 07 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
js同源策略详解
May 21 Javascript
JavaScript运算符小结
Jun 03 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
vue实现计算器功能
Feb 22 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 #Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 #Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 #Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 #Javascript
jQuery层动画定位滑动效果的方法
Apr 30 #Javascript
jquery中$each()方法的使用指南
Apr 30 #Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 #Javascript
You might like
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
php数组使用规则分析
2015/02/27 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
python 表格打印代码实例解析
2019/10/12 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
安全教育实施方案
2014/03/02 职场文书
开幕式邀请函
2015/01/31 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
MySQL存储过程及语法详解
2022/08/05 MySQL