HTML模仿Windows 7 桌面效果

孤独雪鹰

　　我尝试着做个Windows 7 桌面效果，先来看几张截图吧。
　　桌面程序鼠标Hover 效果：

　　任务栏程序鼠标Hover 效果：

　　开始菜单效果：

　　
　　
　　

桌面程序图标
　　桌面背景及程序图标的结构如下：

            
                                    Computer
               
                                    Recycle Bin
               
                                    Network
            
　　
　　在桌面中加入背景图片：

#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代码：

                    
               
               
               
                    
　　首先来看看开始菜单图标如何设置，通过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;}
             
　　
　　
　　任务栏背景通过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;}

　　
　　

开始菜单
　　对于开始菜单的设置可以参考之前提到的那篇文章，本篇在其基础上添加了菜单分割线及透明效果。

                            Internet Explorer                    Microsoft Media Center        
                                Microsoft Word 2010                    Microsoft Excel 2010                    Microsoft PowerPoint 2010                    Microsoft Access 2010                    Windows Update                                        All Programs                                            Documents        Pictures        Music                Games        Computer                Control Panel        Devices and Printers        Default Programs   
　　开始菜单通过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");    });});
　　

源代码下载
　　请使用Chrome 浏览