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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
javascript 写类方式之八
Jul 05 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 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中的三元运算符使用说明
2011/07/03 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
js的一些常用方法小结
2011/06/29 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
window下eclipse安装python插件教程
2017/04/24 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Python标准库shutil用法实例详解
2018/08/13 Python
python读取并写入mat文件的方法
2019/07/12 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
什么是网络协议
2016/04/07 面试题
逻辑链路控制协议
2016/10/01 面试题
考试退步检讨书
2014/01/15 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
本科毕业生求职信
2014/06/15 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL