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 相关文章推荐
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
javascript 数组学习资料收集
Apr 11 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
js编写的treeview使用方法
Nov 11 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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
第十一节 重载 [11]
2006/10/09 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
sqlalchemy对象转dict的示例
2014/04/22 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python实现决策树分类(2)
2018/08/30 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
python中温度单位转换的实例方法
2020/12/27 Python
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
党员年终民主评议的自我评价
2013/11/05 职场文书
战略合作意向书范本
2014/04/01 职场文书
青年志愿者活动方案
2014/08/17 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
个人工作表现自我评价
2015/03/06 职场文书
法人代表证明书范本
2015/06/18 职场文书
中学生运动会广播稿
2015/08/19 职场文书
七年级话题作文之执着
2019/11/19 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
Python实现日志实时监测的示例详解
2022/04/06 Python