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 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
javascript 数组学习资料收集
Apr 11 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
js实现常见的工具条效果
Mar 02 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
php下将XML转换为数组
2010/01/01 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
jQuery实现评论模块
2020/08/19 jQuery
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
python实现彩票系统
2020/06/28 Python
wxpython绘制音频效果
2019/11/18 Python
Django REST framwork的权限验证实例
2020/04/02 Python
python中的yield from语法快速学习
2020/11/06 Python
通过实例解析python and和or使用方法
2020/11/14 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
环境科学专业研究生求职信
2013/10/02 职场文书
清洁工岗位职责
2014/01/29 职场文书
教师师德反思材料
2014/02/15 职场文书
2014年销售员工作总结
2014/12/01 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
围城读书笔记
2015/06/26 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python