给大家带来用层摹拟可挪动的小窗口

只看该作者 · 发表于 2015-1-15 23:23:38

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。
运转代码以下：
<html><head><title>_xWin</title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><METANAME="Description"CONTENT="http://www.youthfly.net"><styletype=text/CSS></style><scriptlanguage=JScript><!--//能够打包为js文件;varx0=0,y0=0,x1=0,y1=0;varoffx=6,offy=6;varmoveable=false;varhover=orange,normal=#336699;//color;varindex=10000;//z-index;//入手下手拖动;functionstartDrag(obj){if(event.button==1){//锁定题目栏;obj.setCapture();//界说工具;varwin=obj.parentNode;varsha=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;}}//拖动;functiondrag(obj){if(moveable){varwin=obj.parentNode;varsha=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;}}//中断拖动;functionstopDrag(obj){if(moveable){varwin=obj.parentNode;varsha=win.nextSibling;varmsg=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;}}//取得核心;functiongetFocus(obj){if(obj.style.zIndex!=index){index=index+2;varidx=index;obj.style.zIndex=idx;obj.nextSibling.style.zIndex=idx-1;}}//最小化;functionmin(obj){varwin=obj.parentNode.parentNode;varsha=win.nextSibling;vartit=obj.parentNode;varmsg=tit.nextSibling;varflg=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";}}//创立一个工具;functionxWin(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();}//初始化;functionbulid(){varstr=""+"<divid=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:2pxsolid"+normal+";"+""+">"+"<div"+"style="+"background-color:"+normal+";"+"width:"+(this.width-2*2)+";"+"height:20;"+"color:white;"+""+""+""+"onmousemove=drag(this)"+""+">"+"<spanstyle=width:"+(this.width-2*12-4)+";padding-left:3px;>"+this.title+"</span>"+"<spanstyle=width:12;border-width:0px;color:white;font-family:webdings;>0</span>"+"<spanstyle=width:12;border-width:0px;color:white;font-family:webdings;>r</span>"+"</div>"+"<divstyle="+"width:100%;"+"height:"+(this.height-20-4)+";"+"background-color:white;"+"line-height:14px;"+"word-break:break-all;"+"padding:3px;"+">"+this.message+"</div>"+"</div>"+"<divid=xMsg"+this.id+"bgstyle="+"width:"+this.width+";"+"height:"+this.height+";"+"top:"+this.top+";"+"left:"+this.left+";"+"z-index:"+(this.zIndex-1)+";"+"position:absolute;"+"background-color:black;"

12下一页

在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

只看该作者 · 发表于 2015-1-16 00:25:30

一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。
+"filter:alpha(opacity=40);"+"></div>";document.body.insertAdjacentHTML("beforeEnd",str);}//显现埋没窗口functionShowHide(id,dis){varbdisplay=(dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):disdocument.getElementById("xMsg"+id).style.display=bdisplay;document.getElementById("xMsg"+id+"bg").style.display=bdisplay;}//--></script><scriptlanguage=JScript></script></head><basetarget="_blank"><bodyonselectstart=returnfalseoncontextmenu=returnfalse><aonclick="ShowHide(1,null);returnfalse;"href="">窗口1</a><aonclick="ShowHide(2,null);returnfalse;"href="">窗口2</a><aonclick="ShowHide(3,null);returnfalse;"href="">窗口3</a></body></html></p></p>

上一页12

最新版本html5+css3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。

只看该作者 · 发表于 2015-1-16 10:51:39

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-1-18 12:57:15

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

仓酷云 · 发表于 2015-1-27 08:24:29

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-2-5 11:36:24

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-2-11 19:54:04

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

只看该作者 · 发表于 2015-3-2 18:34:10

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-11 06:54:23

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-3-18 03:20:16

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

只看该作者 · 发表于 2015-3-25 14:06:31

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 给大家带来用层摹拟可挪动的小窗口

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

给大家带来用层摹拟可挪动的小窗口

给大家带来用层摹拟可挪动的小窗口