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的淡入淡出的特效基础练习
Dec 13 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
学习Angularjs分页指令
Jul 01 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
vue实现点击追加选中样式效果
Nov 01 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程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
jQuery插件开发基础简单介绍
2013/01/07 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python用模块pytz来转换时区
2016/08/19 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Django多数据库的实现过程详解
2019/08/01 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
django rest framework 过滤时间操作
2020/07/12 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
计算机个人求职信范例
2014/01/24 职场文书
电子商务专业求职信
2014/03/08 职场文书
二手房买卖协议书
2014/04/10 职场文书
开展读书活动总结
2014/06/30 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
长征观后感
2015/06/09 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript