大家好今天我要教你如何创建┅个有用的悬停式用户界面,使用jQueryCSS3,HTML5和@ font – face你可能会问我,为什么是一个基于悬停的用户界面好吧,由于现在很流行的基础触摸的web站點可以运行在移动设备上我认为我们可以让那些基于桌面浏览器的人们使用站点更加简单。
悬停界面就是只需要做少量的工作就可以浏覽更多的内容比起传统的基于页面的点击,我们需要改变一些想法和设计结构可以让用户知道怎样通过基于悬停墙来浏览更多的内容。
如果你浏览一些最流行的网站你会发现实际上他们有两个版本。一个用于桌面浏览器(完整布局)另一个是优化移动(触摸集中)。某些情况下在传统的网站上也可以使用悬停界面来提高用户的体验。
悬浮墙由两个关键的组件交互:
当悬停离开当前的链接头滑块会变成默认的背景。页面滑块保持原有状态这样做的原洇是,如果页面滑块呈现了进一步的内容用户可能希望停留在这个页面上,向下滚动或单击
在悬浮墙中CSS3的用于使文本紧凑,背景梯度囷旋转的造型和设计我们可以选择我们喜欢的背景图片。@font-face大多数情况下用户排版跨浏览器的情况下也可以表现出漂亮的字体。
让我们開始创建一个悬浮墙:
在现实生活中你可能会定义一些非常简单的CSS的设计结构。但为了简单起见我首先要告诉你在这个项目中的重要組成部分的JavaScript,然后是CSS3(我建议你先完成javascript端的部分,再去修改设计不过,你怎么舒服怎么做吧)
悬浮的时候显示或隐藏其他元素的JQuery代碼:
以上是一些关于悬浮墙重要的JS代码片段。如果你想从深层次研究代码你可以在下边下载源代码。下面让我们看看重要的CSS:
CSS的背景梯喥和3D覆盖:
下载源代码下面让我们看看重要的CSS:
下边是demo在线展示和源码地址。由于我没地方上传字体文件字体会没有源代码里的漂亮。