大家好,今天我要教你如何创建一个有用的悬停式用户界面,使用jQuery, CSS3, HTML5和@字体——脸。你可能会问我,为什么是一个基于悬停的用户界面吗?好吧,由于现在很流行的基础触摸的web站点可以运行在移动设备上,我认为我们可以让那些基于桌面浏览器的人们使用站点更加简单。
悬停界面就是只需要做少量的工作就可以浏览更多的内容。比起传统的基于页面的点击,我们需要改变一些想法和设计结构,可以让用户知道怎样通过基于悬停墙来浏览更多的内容。
如果你浏览一些最流行的网站。你会发现实际上他们有两个版本。一个用于桌面浏览器(完整布局),另一个是优化移动(触摸集中)。某些情况下,在传统的网站上也可以使用悬停界面来提高用户的体验。
悬浮墙由两个关键的组件交互:
1。头滑块:当用户停留超过1个框架的时候。一个动画效果转到了一个独特的背景,具体是到特定链接标题壁纸的位置。当头部的壁纸完全呈现时,显现出一些特殊的文字,例如标题或网站的标语。
2。页面滑块:在头滑块滑动的同时呈现。用户可以通过点击一个链接,查看相应的“页”元素幻灯片。(这基本上是一个div,其中可以包含文字,图像,视频-任何HTML内容)
当悬停离开当前的链接,头滑块会变成默认的背景。页面滑块保持原有状态。这样做的原因是,如果页面滑块呈现了进一步的内容。用户可能希望停留在这个页面上,向下滚动或单击。
在悬浮墙中CSS3的用于使文本紧凑,背景梯度和旋转的造型和设计。我们可以选择我们喜欢的背景图片.@font-face大多数情况下用户排版。跨浏览器的情况下也可以表现出漂亮的字体。
让我们开始创建一个悬浮墙:
标题框的HTML:
& lt; div id=皐anderwall”比;
& lt; div类=鞍捌鳌北?
& lt; div id=暗谝恢 崩?爸〉谝弧北?
& lt; id=" link1 " href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”alt=癹Query是用于WanderWall动画”在
& lt; span> jQuery& lt;/a>
& lt;/div>
& lt; div id=癴rame2”类=岸 北?
& lt; id=" link2 " href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”alt=" CSS3用于线性梯度和样式”在
& lt; span> CSS3& lt;/a>
& lt;/div>
& lt; div id=癴rame3”类=三帧比;
& lt; id=" link3 " href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”alt=癏TML5权力data-tooltip工具提示”比;
& lt; span> HTML5& lt;/a>
& lt;/div>
& lt; div id=癴rame4”class=暗谒闹 北?
& lt; id=" link4 " href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”alt=白痔遄痔迦Α弊４? lt; span>
@font-face& lt;/a>
& lt;/div>
& lt;/div>
& lt;/div>
滑块页的HTML:
& lt; div类=耙趁妗北?
& lt; div id=癿antletext”比;
& lt; h4>
jQuery
& lt; h3>
Wanderwall 1 & lt;/h3>
& lt;/div>
& lt;/div>
& lt; div类=耙趁妗北?
& lt; div id=癿antletext”比;
& lt; h4>
jQuery
& lt; h3>
Wanderwall 2 & lt;/h3>
& lt;/div>
& lt;/div>
& lt; div类=耙趁妗北?
& lt; div id=癿antletext”比;
& lt; h4>
jQuery
& lt; h3>
Wanderwall 3 & lt;/h3>
& lt;/div>
& lt;/div>
& lt; div类=耙趁妗北?
& lt; div id=癿antletext”比;
& lt; h4>
jQuery
& lt; h3>
Wanderwall 4 & lt;/h3>
& lt;/div>
& lt;/div>
在现实生活中,你可能会定义一些非常简单的CSS的设计结构。但为了简单起见,我首先要告诉你在这个项目中的重要组成部分的JavaScript,然后是CSS3。(我建议你先完成JavaScript端的部分,再去修改设计。不过,你怎么舒服怎么做吧)。
