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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
Javascript Object.extend
May 18 Javascript
Javascript 类型转换方法
Oct 24 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
PHP中的类型约束介绍
2015/05/11 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
药剂学专业应届生自荐信
2013/09/29 职场文书
营销总经理岗位职责
2014/02/02 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
医学求职信
2014/05/28 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
Linux安装Docker详细教程
2022/07/07 Servers