用 CSS+DIV+JS 画出windows live messenger
今天SPACE从麻醉药中醒来，本期望他有个很漂亮的更新，打开后，还是老样子。
人参是土黄色的，逼近红色，红色有给人极至的感觉。凡事有个度，先让自己红一下。
前段时间给自己画了个LOGO ，然后又学习了一下CSS和JS
下面是学习的一个成果
http://keyue.cn/BATE/second.htm
教程如下
首先打开 Dreamweaver 新建一张HTML基本页 基于 xhtml-transitional的
直接进入代码视图（设计视图只看效果）
首先在在body上插入两个JS函数<body onmouseup=releaseCurrent() onmousemove=moveCurrent()></body>
效果是鼠标在页面上对各个层的切换，这段代码是拷贝应用 （这里暂时用不上z-index多层）
代码如下
var dragEffect;
function moveCurrent()
{
if (!dragging || !current)
return;
if (event.button == 0)
{
releaseCurrent();
return;
}
if (!startedDragging)
{
current.className = 'dragging current window';
startedDragging = true;
}
dragEffect();
}
function releaseCurrent()
{
if (!current)
return;
current.className = 'current window';
dragging = false;
startedDragging = false;
}
function makeUnselectable(e)
{
e.unselectable=true;
if (e.className == 'content')
return;
for (var c=e.firstChild;c;c=c.nextSibling)
if (c.nodeType == 1)
makeUnselectable(c);
}
bodyCSS定义如下：
body {font-family:tahoma;font-size: 12px;padding: 0;margin: 0;vertical-align: middle; overflow:hidden;}
再建一个主体层 <div id=fundus onmousemove=calcResize(this) onmousedown=setCurrent(this)></div>
这里引用两个JS函数，作用是 鼠标在层上移动时和左键点在层上时改变鼠标样式，并对层的长宽作出改变
代码改下：
var current = null;
var dragging = false;
var startedDragging = false;
function setCurrent(w)
{
if (w != current)
{
// unset old current
if (current)
current.className = 'window';
// set current
current = w;
current.className = 'current window';
// put current on top
document.getElementById("windows").appendChild(current);
}
// init drag
var offsetX = event.x - parseInt(w.currentStyle.left);
var offsetY = event.y - parseInt(w.currentStyle.top);
if (offsetY < 80)
{
dragging = true;
dragEffect = function()
{
w.style.pixelLeft = event.x - offsetX;
w.style.pixelTop = event.y - offsetY;
}
}
else
{
var width = parseInt(w.currentStyle.width);
var resizeX = offsetX > width - 10;
var height = parseInt(w.currentStyle.height);
var resizeY = offsetY > height - 10;
if (resizeX || resizeY)
{
dragging = true;
var offsetX = event.x - width;
var offsetY = event.y - height;
dragEffect = function()
{
if (resizeX)
w.style.pixelWidth = event.x - offsetX;
if (resizeY)
w.style.pixelHeight = event.y - offsetY;
}
}
}
}
function calcResize(w)
{
var offsetX = event.x - parseInt(w.currentStyle.left);
var offsetY = event.y - parseInt(w.currentStyle.top);
var width = parseInt(w.currentStyle.width);
var resizeX = offsetX > width - 10;
var height = parseInt(w.currentStyle.height);
var resizeY = offsetY > height - 10;
w.style.cursor = (resizeX||resizeY)?(resizeY?"S":"")+(resizeX?"E":"")+"-resize":"default";
}
fundus层CSS定义如下:
#fundus{z-index:1;position:absolute; height:510px; top:43px; left:790px; width: 220px;}
然后在 fundus层上建立
<div id=shadow></div> //阴影层(产生透明阴影)
<div id=glass></div> //颜色过度层(并有透明效果)
<div id=menu></div> //目录层
<div id=headg></div> //头部背景层，产生区别于glass的颜色过度
<div id=head></div> //面板上部位置
<div id=list></div> //主要框架
<div id=bottom></div> //底部
这个层分开，但用绝对位置（absolute）层叠或分布，主要是防止颜色混合了效果出不来
<div id=shadow></div> //阴影层(产生透明阴影) CSS代码:
#shadow{height:100%; width:100%; top:-2px; left:-2px; position:absolute; background-color:#000000;filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=4, makeShadow=true, shadowOpacity=.50); }
这里应用了(CSSfilter) Blur 滤镜 作用是:制作对象内容的模糊效果。
几个参数的作用
enabled Enabled 设置或检索滤镜是否激活。
makeShadow MakeShadow 设置或检索对象的内容是否被处理为阴影显示。
pixelRadius PixelRadius 设置或检索模糊效果的作用深度。
shadowOpacity ShadowOpacity 设置或检索使用 makeShadow 制作成的阴影的透明度(暗度)。
<div id=glass></div> //颜色过度层(并有透明效果) CSS代码:
#glass{position: absolute; border:1 solid black;top: 0px;left: 0px;width: 100%;height: 100%; background-color:#FFFFFF; filter: alpha(opacity=70, style=1, finishOpacity=95,startx=50,starty=50,finishx=50, finishy=0);}
这里应用了(CSSfilter)alpha 滤镜 作用是:调整对象内容的透明度，可以设置整体透明度，或线性渐变和放射渐变的透明度。
几个参数的作用
enabled Enabled 设置或检索滤镜是否激活。
style Style 设置或检索透明渐变的样式。
opacity Opacity 设置或检索透明渐变的开始透明度。
finishOpacity FinishOpacity 设置或检索透明渐变的结束透明度。
startX StartX 设置或检索透明渐变开始点的水平坐标。
startY StartY 设置或检索透明渐变开始点的垂直坐标。
finishX FinishX 设置或检索透明渐变结束点的水平坐标。
finishY FinishY 设置或检索透明渐变结束点的垂直坐标。
<div id=menu></div> //目录层
只有几个字
<div id=menu><strong>Ginseng Msg</strong> <font color="#FF0000" size="1">Bate</font></div>
CSS代码:
#menu{position:absolute; height:30px; left:5px; line-height:30px;}
<div id=headg></div> //头部背景层 CSS代码:
#headg{position:absolute; top:36px; left:3%; width:94%; height:80px; background-color:#000000;filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=1, makeShadow=true, shadowOpacity=.25);}
这里也应用了Blur滤镜。
<div id=head></div> //面板上部位置 CSS代码:
#head{position:absolute; top:36px; left:3%; width:94%; height:80px; background-color:#FFFFFF; border:1 solid #AAAAAA;}
这个层上放置
<div id=inhead></div> //颜色过度 CSS代码:
#inhead{position:absolute;width:100%; height:100%;background-color:#aaaaaa; filter: alpha(opacity=80, style=1, finishOpacity=0,startx=50,starty=70,finishx=50, finishy=0)
alpha(opacity=80, style=1, finishOpacity=30,startx=50,starty=70,finishx=50, finishy=100)}
应用两上alpha 双层过度
<div id=imageh ></div>//放置头像 CSS代码:
#imageh{position:absolute; top:10; left:10; height:40; width:40;border:1 solid #AAAAAA; background-color:#87CAD0; cursor:pointer;}
<div id=comboxname> // 下拉框一 呢称
<select name="select" ><option value="0"><font color="#aaaaaa">-请输入呢称-</font><option value="0"></select>
</div> CSS代码：
#comboxname{position:absolute; top:9; left:60; height:20;}
<div id=comboxmes>头 // 下拉框二 个人消息
<select name="select" ><option value="0"><font color="#aaaaaa"><个人消息></font><option value="0"></select>
</div> CSS代码：
#comboxmes{position:absolute; top:30; left:60; height:20;}
<div id=mail> //邮箱及其它
<img src="button.flash.gif" width="21" height="21">
<img src="button.paste.gif" width="21" height="20">
<img src="button.about.gif" width="21" height="20">
</div> CSS代码：
#mail{top:53px; left:10; position:absolute; width:90%; height:16;}
<div id=list></div> //主要框架 CSS代码：
#list{position:absolute; top:125; left:3%; width:94%; height:70%; background-color:#FFFFFF;}
放置主窗体：
<div id=leftlist><img src="ren.gif" width="30" height="34"></div>//左边选择窗体 CSS代码:
#leftlist{ position:absolute;width:33px; height:40px;border:1 solid #AAAAAA; border-right-color:#FFFFFF; cursor:pointer;}
<div id=context></div>//内容窗体 CSS代码:
#context{position:absolute; left:32px; top:39;width:expression(this.parentElement.offsetWidth-32); height:70%;border:1 solid #AAAAAA ;border-top-color:#FFFFFF;}
用表达式定位。
<div id=searchbar><input type="text" id=tsear name="tsearch" value="查找.."/></div>
//搜索框 CSS代码:
#searchbar{position:absolute; left:32px; top:0; width:expression(this.parentElement.offsetWidth-32); height:40px;border:1 solid #AAAAAA; border-left-color:#FFFFFF; line-height:38px;}
同上 表达式定位。
<div id=adr></div>//广告窗体 CSS 代码:
#adr{position:absolute; top:85%; left:0;; width:90%; height:15%; background-color:#CCCCFF; border:1 solid black; cursor:pointer;}
最后是底部
<div id=bottom></div> //底部 CSS 代码:
#bottom{position:absolute; top:95%; width:90%; height:3%; left:3%;}
几个控件的代码
#tsear{height:20px;color:#AAAAAA; width:150px;}
#bsearch{width:100%; height:16; color:#AAAAAA; font-size:12px}
#flashc{ z-index:1;position:absolute; top:30;left:600;}
#ads{width:97%; background:#000000; height:200px;}
select{background-color:#EEEEEE; border:0;}
好了 完成了 在这个基础上再加上AJAX技术，作个在线的MSN没问题,效果跟软件界面一样好。
注（这里应用了CSS滤镜,XPsq2会限制这些代码,要取消限制后观看代码）
上面都用唯一的ID来区别各个层，来分清各个层的作用和伴置。了解CSS代码的效果和JS代码的效果。
再看一次页面吧
http://keyue.cn/BATE/second.htm
