HTML+CSS 模仿Windows 7 桌面效果

作者: Gnie 來源: 博客園發布時間: 2010-08-04 14:24 閱讀: 5341 次推薦: 3 原文鏈接 [收藏]

前一陣在園子里看到一篇文章《使用css3仿造window7的開始菜單》，文中僅使用CSS3 實現了Windows 7 開始菜單的動態效果，很久以來一直被WPF/Silverlight 山上的風景所吸引，未成想其他的山也同樣引人入勝。于是心血來潮也嘗試著做了一個Windows 7 桌面效果，先來看幾張截圖吧。

桌面程序鼠標Hover 效果：

Desktop

任務欄程序鼠標Hover 效果：

Taskbar

開始菜單效果：

StartMenu

桌面程序圖標

桌面背景及程序圖標的結構如下：

<div id="win">
    <ul id="app">
        <li>
            <a href="#">
            <img src="images/computer.png"><br />
            Computer</a>
        </li>
        <li>
            <a href="#">
            <img src="images/recycle.png"><br />
            Recycle Bin</a>
        </li>
        <li>
            <a href="#">
            <img src="images/network.png"><br />
            Network</a>
        </li>
    </ul>
</div>

在桌面<div>中加入背景圖片：

#win
{
    background-image: url(images/win7bg.jpg);
    background-position: center;
    width: 880px;
    height: 550px;
    border: #ffffff 1px solid;
}

為桌面應用圖標添加鼠標Hover 動態效果，text-shadow 用來設置應用程序文字陰影效果，-webkit-border-radius 可設置邊框圓角：

#app
{
    float: left;
    text-align: center;
    margin: -15px 0 0 -30px;
    list-style: none;
}

#app a
{
    text-decoration: none;
    border: solid 1px transparent;
    display: block;
    padding: 3px;
    margin: 20px 0 0 0;
    color: #ffffff;
    text-shadow: 0.2em 0.1em 0.3em #000000;
}

#app a:hover
{
    border: solid 1px #bbd6ec;
    -webkit-border-radius: 3px;
    box-shadow: inset 0 0 1px #fff;
    -webkit-box-shadow: inset 0 0 1px #fff;
    background-color: #5caae8;
}

任務欄程序圖標

下面是任務欄結構的HTML代碼：

<div id="taskbar">
    <a href="#" id="start"></a>
    <a href="#" style="left: 60px">
        <img src="images/ie.png" />
    </a>
    <a href="#" style="left: 120px">
        <img src="images/library.png" />
    </a>
    <a href="#" style="left: 180px">
        <img src="images/mp.png" />
    </a>
    <a href="#" style="left: 240px">
        <img src="images/live.png" />
    </a>
    <a href="#" style="left: 300px">
        <img src="images/outlook.png" />
    </a>
    <div id="desktop"></div>
</div>

首先來看看開始菜單圖標如何設置，通過Hover 操作變換start.bmp 顯示位置，達到圖標發亮效果。

#taskbar #start
{
    position: absolute;
    text-align: center;
    width: 57px;
    height: 46px;
    background: url(images/start.bmp) 0 -6px no-repeat;
}

#taskbar #start:hover
{
    text-decoration: none;
    background-position: 0 -114px;
}

start

任務欄背景通過taskbarbg.png 實現，其他圖標Hover 效果通過改變taskbarhover.png 圖片位置實現圖標下方高亮效果。

#taskbar
{
    height: 42px;
    width: 880px;
    margin: -42px 0 0 1px;
    background: url(images/taskbarbg.png) no-repeat;
}

#taskbar img
{
    margin: 5px 0 0 0;
    width: 30px;
    height: 29px;
}

#taskbar a
{
    position: absolute;
    text-align: center;
    width: 57px;
    height: 46px;
    background: url(images/taskbarhover.png) 0 -46px no-repeat;
}

#taskbar a:hover
{
    background-position: 0 -3px;
}

　　開始菜單

對于開始菜單的設置可以參考之前提到的那篇文章，本篇在其基礎上添加了菜單分割線及透明效果。

<div id="menuwin">
    <div id="startmenu"></div>
    <ul id="programs">
        <li><a href="#">
            <img src="images/ie.png" />Internet Explorer</a></li>
        <li><a href="#">
            <img src="images/mc.png" />Microsoft Media Center</a></li>
        <li>
            <div id="leftspliter"></div></li>
        <li><a href="#">
            <img src="images/word.png" />Microsoft Word 2010</a></li>
        <li><a href="#">
            <img src="images/excel.png" />Microsoft Excel 2010</a></li>
        <li><a href="#">
            <img src="images/powerpoint.png" />Microsoft PowerPoint 2010</a></li>
        <li><a href="#">
            <img src="images/access.png" />Microsoft Access 2010</a></li>
        <li><a href="#">
            <img src="images/update.png" />Windows Update</a></li>
        <li>
            <div id="leftspliter"></div></li>
        <li><a href="#">
            <img src="images/narrow.png" />All Programs</a></li>
        <li>
            <img id="search" src="images/search.png" /></li>
    </ul>
    <ul id="links">
        <li class="icon"><img src="images/user.png" /></li>
        <li><a href="#"><span>Documents</span></a></li>
        <li><a href="#"><span>Pictures</span></a></li>
        <li><a href="#"><span>Music</span></a></li>
        <li><div id="rightspliter"></div></li>
        <li><a href="#"><span>Games</span></a></li>
        <li><a href="#"><span>Computer</span></a></li>
        <li><div id="rightspliter"></div></li>
        <li><a href="#"><span>Control Panel</span></a></li>
        <li><a href="#"><span>Devices and Printers</span></a></li>
        <li><a href="#"><span>Default Programs</span></a></li>
    </ul>
</div>

開始菜單通過opacity 設置其透明度：

#startmenu
{
    border: solid 1px #102a3e;
    overflow: visible;
    display: block;
    float: left;
    height: 404px;
    width: 400px;
    opacity: 0.9;
    -webkit-border-radius: 5px;
    position: absolute;
    box-shadow: inset 0 0 1px #ffffff;
    -webkit-box-shadow: inset 0 0 1px #ffffff;
    background-color: #619bb9;
    background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));
}

通過jQuery（common.js）完成開始菜單打開/關閉效果

$(document).ready(function () {
    $("#start").click(function () {
        $("#menuwin").css("display", "block");
    });
    $("#win").click(function () {
        $("#menuwin").css("display", "none");
    });
    $("#desktop").click(function () {
        $("#menuwin").css("display", "none");
    });
});