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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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
极典R601SW收音机
2021/03/02 无线电
编写自己的php扩展函数
2006/10/09 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
js读写json文件实例代码
2014/10/21 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
python插入排序算法的实现代码
2013/11/21 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
python实现人机猜拳小游戏
2020/02/03 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
市场部专员岗位职责
2013/11/30 职场文书
婚礼主持词开场白
2014/03/13 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
2014年保洁工作总结
2014/11/24 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python