javascript实现可拖动变色并关闭层窗口实例


Posted in Javascript onMay 15, 2015

本文实例讲述了javascript实现可拖动变色并关闭层窗口的方法。分享给大家供大家参考。具体分析如下:

这是一款基于javascript+CSS实现层拖动的代码,不同的是它在拖动的时候窗口会变色,使操作体验更好一些,你可以运行代码查看效果。它还可以显示/隐藏或关闭打开的效果,没事的时候推敲一下

<html>
<head>
<title>拖动窗口</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type='text/css'>
<!--
body{font-size:12px;}
a:visited{text-decoration:none;color:slategray;}
a:hover{text-decoration:underline;color:slategray;}
a:link{text-decoration:none;color:slategray;}
-->
</style>
<script language=JScript>
<!--
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;
var hover='orange',normal='#336699';//color;
var index=10000;//z-index;
//开始拖动;
function startDrag(obj)
{
if(event.button==1)
{
//锁定标题栏;
obj.setCapture();
//定义对象;
var win = obj.parentNode;
var sha = win.nextSibling;
//记录鼠标和层位置;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.style.left);
y1 = parseInt(win.style.top);
//记录颜色;
normal = obj.style.backgroundColor;
//改变风格;
obj.style.backgroundColor = hover;
win.style.borderColor = hover;
obj.nextSibling.style.color = hover;
sha.style.left = x1 + offx;
sha.style.top = y1 + offy;
moveable = true;
}
}
//拖动;
function drag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
sha.style.left = parseInt(win.style.left) + offx;
sha.style.top = parseInt(win.style.top) + offy;
}
}
//停止拖动;
function stopDrag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
var msg = obj.nextSibling;
win.style.borderColor = normal;
obj.style.backgroundColor = normal;
msg.style.color = normal;
sha.style.left = obj.parentNode.style.left;
sha.style.top = obj.parentNode.style.top;
obj.releaseCapture();
moveable = false;
}
}
//获得焦点;
function getFocus(obj)
{
if(obj.style.zIndex!=index)
{
index = index + 2;
var idx = index;
obj.style.zIndex=idx;
obj.nextSibling.style.zIndex=idx-1;
}
}
//最小化;
function min(obj)
{
var win = obj.parentNode.parentNode;
var sha = win.nextSibling;
var tit = obj.parentNode;
var msg = tit.nextSibling;
var flg = msg.style.display=="none";
if(flg)
{
win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
msg.style.display = "block";
obj.innerHTML = "0";
}
else
{
win.style.height = parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
obj.innerHTML = "2";
msg.style.display = "none";
}
}
//创建一个对象;
function xWin(id,w,h,l,t,tit,msg)
{
index = index+2;
this.id = id;
this.width = w;
this.height = h;
this.left = l;
this.top = t;
this.zIndex = index;
this.title = tit;
this.message = msg;
this.obj = null;
this.bulid = bulid;
this.bulid();
}
//初始化;
function bulid()
{
var str = ""
+ "<div id=xMsg" + this.id + " "
+ "style='"
+ "z-index:" + this.zIndex + ";"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "left:" + this.left + ";"
+ "top:" + this.top + ";"
+ "background-color:" + normal + ";"
+ "color:" + normal + ";"
+ "font-size:8pt;"
+ "font-family:Tahoma;"
+ "position:absolute;"
+ "cursor:default;"
+ "border:2px solid " + normal + ";"
+ "' "
+ "onmousedown='getFocus(this)'>"
+ "<div "
+ "style='"
+ "background-color:" + normal + ";"
+ "width:" + (this.width-2*2) + ";"
+ "height:20;"
+ "color:white;"
+ "' "
+ "onmousedown='startDrag(this)' "
+ "onmouseup='stopDrag(this)' "
+ "onmousemove='drag(this)' "
+ "ondblclick='min(this.childNodes[1])'"
+ ">"
+ "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"
+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>"
+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='ShowHide(\""+this.id+"\",null)'>r</span>"
+ "</div>"
+ "<div style='"
+ "width:100%;"
+ "height:" + (this.height-20-4) + ";"
+ "background-color:white;"
+ "line-height:14px;"
+ "word-break:break-all;"
+ "padding:3px;"
+ "'>" + this.message + "</div>"
+ "</div>"
+ "<div id=xMsg" + this.id + "bg style='"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "top:" + this.top + ";"
+ "left:" + this.left + ";"
+ "z-index:" + (this.zIndex-1) + ";"
+ "position:absolute;"
+ "background-color:black;"
+ "filter:alpha(opacity=40);"
+ "'></div>";
document.body.insertAdjacentHTML("beforeEnd",str);
}
//显示隐藏窗口
function ShowHide(id,dis){
var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis
document.getElementById("xMsg"+id).style.display = bdisplay;
document.getElementById("xMsg"+id+"bg").style.display = bdisplay;
}
//-->
</script>
<script language='JScript'>
<!--
function initialize()
{
var a = new xWin("1",160,200,200,200,"窗口1","xWin Demo");
var b = new xWin("2",240,200,100,100,"窗口2","Welcome"); 
var c = new xWin("3",200,160,250,50,"窗口3","Copyright");
ShowHide("1","none");//隐藏窗口1
}
window.onload = initialize;
//-->
</script>
</head>
<base target="_blank">
<body onselectstart='return false' oncontextmenu='return false' >
<a onclick="ShowHide('1',null);return false;" href="">Windows 1</a>
<a onclick="ShowHide('2',null);return false;" href="">Windows 2</a>
<a onclick="ShowHide('3',null);return false;" href="">Windows 3</a>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
vue2中filter()的实现代码
Jul 09 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
JavaScript实现简单的数字倒计时
May 15 #Javascript
JavaScript生成福利彩票双色球号码
May 15 #Javascript
JavaScript实现列表分页功能特效
May 15 #Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 #Javascript
js生成验证码并直接在前端判断
May 15 #Javascript
javascript实现表格增删改操作实例详解
May 15 #Javascript
javascript实现可全选、反选及删除表格的方法
May 15 #Javascript
You might like
学习使用curl采集curl使用方法
2012/01/11 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
window.name代替cookie的实现代码
2010/11/28 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
js实现股票实时刷新数据案例
2017/05/14 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
python中日期和时间格式化输出的方法小结
2015/03/19 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python调用staf自动化框架的方法
2018/12/26 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
大学生工作求职信
2014/06/23 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript