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控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 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初学者头疼十四条问题大总结
2008/11/12 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
PHP7 弃用功能
2021/03/09 PHP
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
Python字符遍历的艺术
2008/09/06 Python
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python常见工厂函数用法示例
2018/03/21 Python
python使用turtle绘制分形树
2018/06/22 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
keras 多任务多loss实例
2020/06/22 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
劳资员岗位职责
2013/11/11 职场文书
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
小学班主任寄语大全
2014/04/04 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
干部个人对照检查材料
2014/08/25 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
Python3 如何开启自带http服务
2021/05/18 Python
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL