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滚动字幕效果实现代码
Jun 22 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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/07 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
js的对象与函数详解
2019/01/21 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
Python递归遍历列表及输出的实现方法
2015/05/19 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
python使用knn实现特征向量分类
2018/12/26 Python
python pygame实现方向键控制小球
2019/05/17 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
爱情保证书大全
2014/04/29 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
服务整改报告
2014/11/06 职场文书
毕业典礼邀请函
2015/01/31 职场文书
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android