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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
jquery插件格式实例分析
Jun 16 Javascript
微信开发 微信授权详解
Oct 21 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 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
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
python TCP包注入方式
2020/05/05 Python
如何教少儿学习Python编程
2020/07/10 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
学期研究性学习个人的自我评价
2014/01/09 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
尊师重教演讲稿
2014/09/04 职场文书
班主任经验交流材料
2014/12/16 职场文书
单位计划生育责任书
2015/05/09 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL