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 相关文章推荐
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
详解小程序云开发数据库
May 20 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
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来检测proxy
2006/10/09 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
解析php取整的几种方式
2013/06/25 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
vue项目实现图片上传功能
2019/12/23 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
Python Socket编程详细介绍
2017/03/23 Python
python生成器与迭代器详解
2019/01/01 Python
python使用递归的方式建立二叉树
2019/07/03 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python retrying模块的使用方法详解
2019/09/25 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
国培远程培训感言
2014/03/08 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
教育实习指导教师评语
2014/12/31 职场文书
python manim实现排序算法动画示例
2022/08/14 Python
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技