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 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
JS实现放大镜效果
Sep 21 Javascript
Openlayers实现距离面积测量
Sep 28 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
PHP高自定义性安全验证码代码
2011/11/27 PHP
解析php中curl_multi的应用
2013/07/17 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
JS继承用法实例分析
2015/02/05 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
Python 元类使用说明
2009/12/18 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
Python类的用法实例浅析
2015/05/27 Python
Pytorch之Variable的用法
2019/12/31 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
连锁经营管理专业大学生求职信
2013/10/30 职场文书
物流司机岗位职责
2013/12/28 职场文书
社区包粽子活动方案
2014/01/21 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
公司请假条范文
2014/04/11 职场文书
廉政教育的心得体会
2014/09/01 职场文书
团代会邀请函
2015/02/02 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python