前言

大家好，今天我将教大家如何创建一个有用的悬停用户界面，使用jQuery、CSS3、HTML5和@ fontface。你可能会问我，为什么它是基于悬停的用户界面？嗯，既然流行的基本触摸网站可以在移动设备上运行，我认为我们可以让基于桌面浏览器的人更容易使用该网站。

什么是悬停界面？

悬停界面意味着你可以用很少的工作浏览更多的内容。与传统的基于页面的点击相比，我们需要改变一些思路和设计结构，让用户知道如何基于悬停墙浏览更多的内容。

如果你访问一些最受欢迎的网站。你会发现它们其实有两个版本。一个是桌面浏览器(完整布局)，另一个是优化移动(触控集中)。在某些情况下，悬停界面也可以在传统网站上使用，以改善用户体验。

悬浮墙是如何工作的？

悬浮墙与两个关键组件相互作用：

1.头部滑块：当用户停留超过1帧时。动画效果会变成一个独特的背景，特别是特定链接标题的壁纸的位置。当头部的壁纸完全呈现出来的时候，就会出现一些特殊的文字，比如网站的标题或者口号。

2.页面滑块：当磁头滑块滑动时显示。用户可以点击链接查看相应的“页面”元素幻灯片。(这基本上是一个div，可以包含文本、图像、视频——任何HTML内容。)当远离当前链接悬停时，标题滑块将成为默认背景。页面滑块保持其原始状态。这样做的原因是，如果页面滑块呈现更多的内容。用户可能希望停留在此页面，向下滚动或单击。

如何使用CSS3的@ font-face和HTML5？

悬浮墙CSS3的建模设计，使文字紧凑，背景渐变，旋转。我们可以选择自己喜欢的背景图片。@font-face用户排版在大多数情况下。漂亮的字体也可以跨浏览器显示。

让我们开始创建一个浮动墙：

标题框架的HTML:

div id=' wad wall ' div class=' wrapper ' div id=' frame 1 ' class=' frame first ' a style=' display : block；id=' link 1 ' href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' alt=' jQuery用于为WanderWall的动画提供动力' spanjQuery/span/a/div div id=' frame 2 ' class=' frame two ' a style=' display 3360 block；'id=' link 2 ' href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' alt=' CSS3用于线性渐变和样式化' sp anCSS3/span/a/div div id=' frame 3 ' class=' frame three ' a style=' display : block；'id=' link 3 ' href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' alt=' html 5为数据提供动力-工具提示' spanHTMl 5/span/a/div div id=' frame 4 ' class=' frame found ' a style=' display 3360 block；id=' link 4 ' href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' alt=' font-face为字体供电' span @ font-face/span/a/div/div/

Div class=' page ' Div id=' mantle text ' h3jquery/h3h2wandlwall 1/H2/Div/Div class=' page ' Div id=' mantle text ' h3jquery/h3h2wandlwall 2/H2/Div/Div class=' page ' Div id=' mantle text ' h3jquery/h3h2wandlwall 4/H2/Div/Div在现实生活中，你可能会定义一些非常但是为了简单起见，我先告诉你这个项目中JavaScript的重要部分，然后是CSS3。(建议你先完成javascript端，再修改设计。然而，做你觉得舒服的事。

背景动画的JQuery代码(帧悬停):

$('div.frame a ').悬停(函数(){/*剥离链接标识符，只形成ID */var ID=这个。身份证。替换(' link '，' ')；var CurrentLink=$(this)；/*基于标识的其他帧隐藏*/hideterset(标识);位置=-296 * id；/*定义此框架的页面出现的偏移量*/marginnew=页面宽度* id *-1；/*如果不在默认页面上，则显示主页链接*/如果(id 0){$('#homelink ').show()；}else{$('#homelink ').hide()；}/*将页面滑块设置为新的偏移量*/$('。页面滑块').停止()。动画({marginLeft: marginnew}，800)；/*动画化标题背景*/$("#漫游者墙")。停止()。animate({背景位置： '(50% '位置' px '))}，500，function(){ var distance=0；var topdis=-190；var text=CurrentLink。attr(' alt ')；var信息框架=$(' # info frame ')；/*定义标题壁纸文本出现在框架旁边的偏移量*/switch(id){ case ' 1 ' :距离=500；打破；案例' 2 ' :距离=730打破；案例' 3 ' :距离=200打破；case ' 4 ' : distance=400 topdis=-198；打破；}infoframe.html(文本);infoframe.css('左边距，距离px’)；infoframe.css('margin-top '，topdis ' px ')；信息框。FADEIN()；});}，function(){$('#infoframe ').hide()；var id=this.id.replace('link '，' ')；$(' # wad wall ').停止()。动画({背景位置： '(50% 0px)' }，500)；showtherset()；});悬浮的时候显示或隐藏其他元素的框架代码：

函数hideterset(id){ for(var I=1；i5；我){如果（我！=id){$('#frame' i ' a ').css('display '，' block ')；$(“# frame”I).' CSS('滤镜，(不透明度=90)');$(“# frame”I).停止()。fadeTo('fast '，0)；$('#frame' i ' a ').css('display '，' none ')；} } $(“# info frame”).' CSS('可见','可见');}以上是一些关于悬浮墙重要的射流研究…代码片段。如果你想从深层次研究代码。你可以在下边下载源代码。下面让我们看看重要的CSS:

半铸钢钢性铸铁(铸造半钢)的背景梯度和三维(三维的缩写)覆盖：

下载源代码。下面让我们看看重要的CSS:

正文{背景：-web套件-渐变(线性、左下、左上、色停(0.09，rgb(153，153，153))，色停(0.55，rgb(242，242，242))，色停(0.78，rgb(240，237，240))；背景：-moz-线性梯度（中心底部，rgb(153，153，153) 9%，rgb(242，242，242) 55%，rgb(240，237，240)78%；} #地幔{宽度：100%;高度：30 px背景：-网络套件-渐变（线性、左下、左上、色停(0.09，rgb(153，153，153))，色停(0.55，rgb(242，242，242))，色停(0.78，rgb(252，252，252))；背景：-moz-线性-渐变（中心底部，rgb(153，153，153) 9%，rgb(242，242，242) 55%，rgb(252，252，252)78%；-web kit-背景-origin:填充；-web kit-背景-clip:内容；边框-底部：1px实心# fff}框架旋转的CSS3:框架：悬停{-web kit-transform :旋转(-9)；-moz-变压器：旋转(-9 );}跨浏览器的@ fontface

@ font-face { font-family : ' leaguegothircrule '；src : URL(' league _ gothic-web字体。eot’)；src:本地(')、网址(' league _ gothic-web字体。woff’)格式(' woff ')、url('league_gothic-webfont.ttf ')格式(' truetype ')、URL(' league _ gothic-web字体。SVG # webfont wj2ialek ')格式(' SVG ')；字体粗细：正常；字体样式：正常；}好的。这就是全部了。

由于IE9之前的工业管理学(工业工程)浏览器不支持CSS3和部分HTML5。推荐使用chrome/Firefox/IE9浏览器：)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。