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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
面试常见的js算法题
Mar 23 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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抽奖小程序的实现代码
2013/06/18 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
Python的print用法示例
2014/02/11 Python
Python学习笔记_数据排序方法
2014/05/22 Python
python非递归全排列实现方法
2017/04/10 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
测绘工程系学生的自我评价
2013/11/30 职场文书
员工拓展培训方案
2014/02/15 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
成立公司计划书
2014/05/07 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
母亲节主题班会
2015/08/14 职场文书
《小小的船》教学反思
2016/02/18 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python