用 CSS+DIV+JS 畫出windows live messenger

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

今天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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More