DIV制作浮在页面的窗口

<html><head><title>DIV制作浮在页面的窗口丨Daniel wellington</title><style type='text/css'><!--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><!--//可以打包为js文件;var x0=0,y0=0,x1=0,y1=0;var offx=6,offy=6;var moveable=false;var hover='orange',normal='slategray';//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 cls(obj){var win = obj.parentNode.parentNode;var sha = win.nextSibling;win.style.visibility = "hidden";sha.style.visibility = "hidden";}//创建一个对象;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:10px;"+ "font-family:Verdana;"+ "position:absolute;"+ "cursor:default;"+ "border:2px solid " + normal + ";"+ "' "+ "οnmοusedοwn='getFocus(this)'>"+ "<div "+ "style='"+ "background-color:" + normal + ";"+ "width:" + (this.width-2*2) + ";"+ "height:20;"+ "color:white;"+ "' "+ "οnmοusedοwn='startDrag(this)' "+ "οnmοuseup='stopDrag(this)' "+ "οnmοusemοve='drag(this)' "+ "οndblclick='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;' οnclick='min(this)'>0</span>"+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' οnclick='cls(this)'>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 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);"+ "'>by wildwind</div>";document.body.insertAdjacentHTML("beforeEnd",str);}//--></script><script language='JScript'><!--function initialize(){var a = new xWin("1",160,200,200,200,"Message","xWin <br> A Cool Pop Div Window<br>Version:1.0<br>2002-8-13");var b = new xWin("2",240,200,100,100,"Wildwind's Msgbox","Welcome to visited my personal website:<br><a href=http://www.csrcode.cn target=_blank>http://www.CsrCode.cn</a><br>and u can also sign my guestbook at:<br><a href=http://www.CsrCode.cn target=_blank>http://www.CsrCode.cn</a><br><br>thx!!! =)...");var c = new xWin("3",200,160,250,50,"Copyright","Copyright by <a href=http://www.qpsh.com>http://www.qpsh.com</a>!");}window.onload = initialize;//--></script></head><body onselectstart='return false' oncontextmenu='return false' scroll='no'><br><br><hr></body></html>

转载于:https://www.cnblogs.com/youtianxia/p/4729564.html

DIV制作浮在页面的窗口相关推荐

基础知识：页面div始终浮在浏览器顶部
页面div始终浮在浏览器顶部 <html> <head><meta charset="utf-8"/><title>test< ...
使用element UI 快速制作一个列表页面
使用element制作一个列表页面,并且当点击"查看调查问卷"时弹出弹框. (图一) (图二) (图三) 1. 制作一个名叫DataListTable <DataListTa ...
“页面制作人员”？“页面工程师”？“页面架构师”？滚一边去！
随手查看我的Blog统计,发现有好多人来自蓝色理想上推荐的一篇文章叫<页面制作人员(W3C Page Builder)的修炼之道>,随后我来到作者blog,发现作者在文章中推荐了我的blo ...
HTML制作简单的页面
一.HTML页面制作代码部分 <html><head><meta charset="utf-8"><title>Music Logi ...
HTML第6章上机练习3(制作京东快报页面)
代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
制作商品详情页面案例
需将文章最后的图片保存下来与代码放于同一目录中商品详情页面模板 HTML代码  <!DOCTYPE html> ...
DW静态网页设计与制作 JavaScript大作业 HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS)
HTML静态网页作业--海贼王主题网页设计制作6个页面(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
不懂技术，如何轻松制作微信H5页面？
H5这个由HTML5简化而来的词汇,正通过微信广泛传播.H5是集文字.图片.音乐.视频.链接等多种形式的展示页面,丰富的控件.灵活的动画特效.强大的交互.实现信息传播,非常适合通过手机的展示.分享.也 ...
Android音乐App桌面图标制作以及启动页面开发（简易音乐一）
Android音乐App桌面图标制作以及启动页面开发( 简易音乐一 ) 关于效果第一步第二步第一步修改SplashAcitivity的布局页面第二步修改androidmanifest. ...

DIV制作浮在页面的窗口

DIV制作浮在页面的窗口相关推荐

最新文章

热门文章