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 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JavaScript Timer实现代码
Feb 17 Javascript
Js获取事件对象代码
Aug 05 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
微信小程序如何访问公众号文章
Jul 08 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
BootStrap selectpicker
2016/06/20 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Python进行数据提取的方法总结
2016/08/22 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
python数据结构之链表详解
2017/09/12 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
高中军训感想300字
2014/03/04 职场文书
股权转让协议书范本
2014/04/12 职场文书
个人作风建设自查报告
2014/10/22 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
课程设计感想范文
2015/08/11 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
vue实现滑动解锁功能
2022/03/03 Vue.js