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与vbscript数据共享
Jan 09 Javascript
Sample script that deletes a SQL Server database
Jun 16 Javascript
Javascript的闭包
Dec 31 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
QT与javascript交互数据的实现
May 26 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
jquery中实现标签切换效果的代码
2011/03/01 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
Python中DJANGO简单测试实例
2015/05/11 Python
python实现识别相似图片小结
2016/02/22 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
TensorFlow实现Logistic回归
2018/09/07 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
pycharm的python_stubs问题
2020/04/08 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
团员个人的自我评价
2013/12/02 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
反四风对照检查材料
2014/09/22 职场文书
工作能力自我评价2015
2015/03/05 职场文书