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 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
JS控制输入框内字符串长度
May 21 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
JS中箭头函数与this的写法和理解
Jan 14 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函数
2010/01/11 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
php实现上传图片文件代码
2015/07/19 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
Python编写百度贴吧的简单爬虫
2015/04/02 Python
python计算时间差的方法
2015/05/20 Python
一看就懂得Python的math模块
2018/10/21 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
用python制作个音乐下载器
2021/01/30 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
医院信息公开实施方案
2014/05/09 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
世界读书日的活动方案
2014/08/20 职场文书
三方股东合作协议书
2014/10/28 职场文书
2014年村委会工作总结
2014/11/24 职场文书
2014年节能工作总结
2014/12/18 职场文书
优秀教师个人总结
2015/02/11 职场文书
小学生节水倡议书
2015/04/29 职场文书
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis