HTML+CSS 模仿Windows 7 桌面效果
来源:Cnblogs 发布时间:2010-06-17 14:33:00
前一阵看到一篇文章《使用css3仿造window7的开始菜单》,文中仅使用CSS3 实现了Windows 7 开始菜单的动态效果,很久以来一直被WPF/Silverlight 山上的风景所吸引,未成想其他的山也同样引人入胜。于是心血来潮也尝试着做了一个Windows 7 桌面效果,先来看几张截图吧。
桌面程序鼠标Hover 效果:
任务栏程序鼠标Hover 效果:
开始菜单效果:
桌面程序图标
桌面背景及程序图标的结构如下:
<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;}
任务栏背景通过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"); });});
源代码下载
请使用Chrome 浏览
猜你喜欢
- chat.html <html> <head><title>asp之家-简单聊天&l
- 一、XML产生的背景 XML同HTML一样,都来自Standard Generalized Markup Language, 即标准通用标记
- 一.背景在现在的网站中,接入的渠道是越来越多了,技术也是越来越先进,WAP, SMS,EMAIL, 传统的Web, Socket等等,如果连
- 如何使整个页面内容居中,如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题。下面就给出一个实际的例子,并详细解释。(本文的经验和是蓝
- 常用字段类型bit(0和1),datetime,int,varchar,nvarchar(可能含有中文用nvarchar) Varchar,
- 对于个人网站来说,受到建站条件的制约,Access数据库成了广大个人网站站长的首选。然而,Access数据库本身存在很多安全隐患,攻击者一旦
- 1 查找记录条数 select count(*) from table_name(换成表名)&nbs
- SQL Server所谓的分布式查询(Distributed Query)是能够访问存放在同一部计算机或不同计算机上的SQL Server或
- 下面给出ORACLE的一种实现方式,要分2步走:1. 建立 SEQUENCE CREATE [ OR REPLACE ] SEQUENCE
- 这里是一个基于GMap2和XML的小例子,数据存在XML文件中 ,这是最简单的模式,却相当地有用。实例的网址是: http://sunjia
- 近期公司准备开发一个计费项目,数据库当然还是选用我最信赖的Oracle了。由于一部分基础数据在一台Win2000 Server的S
- Css tranistions允许元素的属性在单位时间内发生平滑的过渡,在阅读完《CSS Transitions Module Level
- 选择最实用来谈一下首先,你要慎重选择你就业的城市。这点是目前多数人都忽略的重要因素。无论你的设计思路和发展方向都要依托你所在城市来作为载体。
- 网上大部分的免费asp程序使用的是access数据库。但是access数据库作为一个中小型的单机数据库系统,在承担访问量、数据量大的网站应用
- 方法来源于土豆网的导航,在这里纪录一下实现的思路。主要是利用 position 属性的 absolute 和 relative 配
- 以SQL Server中的Northwind示范数据库为例,利用DTS设计器,进行数据的转移。转移任务的步骤:◆1. 新建目的数据库NOrt
- RegMail是用来存放注册邮件的表,现以创建时间(CreateTime)字段来给表进行分区,具体步骤如下:--为分区创建存储文件 
- If...Then...Else 语句的一种变形,即添加任意多个 ElseIf 子句以扩充 If...Then...Else 语句的功能,允
- 50个常用sql语句 Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(
- 学习目的 接触验证控件 昨天介绍了SQL SERVER插入数据,但是我们省略了验证输入这一步。以前的做法是用语句逐个判断输入的正确性,如是否