【看完想不會都難系列教程】 - （2）使用CSS3+JQuery實現懸浮墻式菜單
大家好，今天我要教你如何創建一個有用的懸停式用戶界面，使用jQuery，CSS3，HTML5和@ font – face。你可能會問我，為什么是一個基于懸停的用戶界面？好吧，由于現在很流行的基礎觸摸的web站點可以運行在移動設備上，我認為我們可以讓那些基于桌面瀏覽器的人們使用站點更加簡單。
什么是懸停界面？
懸停界面就是只需要做少量的工作就可以瀏覽更多的內容。比起傳統的基于頁面的點擊，我們需要改變一些想法和設計結構，可以讓用戶知道怎樣通過基于懸停墻來瀏覽更多的內容。
如果你瀏覽一些最流行的網站。你會發現實際上他們有兩個版本。一個用于桌面瀏覽器（完整布局），另一個是優化移動（觸摸集中）。某些情況下，在傳統的網站上也可以使用懸停界面來提高用戶的體驗。
懸浮墻是如何工作的？
懸浮墻由兩個關鍵的組件交互：
- 頭滑塊：當用戶停留超過1個frame的時候。一個動畫效果轉到了一個獨特的背景，具體是到特定鏈接標題壁紙的位置。當頭部的壁紙完全呈現時，顯現出一些特殊的文字，例如標題或網站的標語。
- 頁面滑塊：在頭滑塊滑動的同時呈現。用戶可以通過點擊一個鏈接，查看相應的“頁”元素幻燈片。（這基本上是一個div，其中可以包含文字，圖像，視頻-任何HTML內容）
當懸停離開當前的鏈接，頭滑塊會變成默認的背景。頁面滑塊保持原有狀態。這樣做的原因是，如果頁面滑塊呈現了進一步的內容。用戶可能希望停留在這個頁面上，向下滾動或單擊。
懸浮墻使如何使用CSS3的@ font - face的和HTML5？
在懸浮墻中CSS3的用于使文本緊湊，背景梯度和旋轉的造型和設計。我們可以選擇我們喜歡的背景圖片。@font-face大多數情況下用戶排版?？鐬g覽器的情況下也可以表現出漂亮的字體。
讓我們開始創建一個懸浮墻：
header frame 的HTML：
<div id="wanderwall">
<div class="wrapper">
<div id="frame1" class="frame first">
<a style="display: block;" id="link1" href="#" alt="jQuery is used to power WanderWall's animations">
<span>jQuery</span> </a>
</div>
<div id="frame2" class="frame two">
<a style="display: block;" id="link2" href="#" alt="CSS3 is used for linear gradients and styling">
<span>CSS3</span> </a>
</div>
<div id="frame3" class="frame three">
<a style="display: block;" id="link3" href="#" alt="HTML5 powers the data-tooltip tooltips">
<span>HTML5</span> </a>
</div>
<div id="frame4" class="frame fourth">
<a style="display: block;" id="link4" href="#" alt="Font-Face powers the fonts"><span>
@font-face</span> </a>
</div>
</div>
</div>
滑塊頁的HTML：
<div class="page">
<div id="mantletext">
<h3>
jQuery</h3>
<h2>
Wanderwall 1</h2>
</div>
</div>
<div class="page">
<div id="mantletext">
<h3>
jQuery</h3>
<h2>
Wanderwall 2</h2>
</div>
</div>
<div class="page">
<div id="mantletext">
<h3>
jQuery</h3>
<h2>
Wanderwall 3</h2>
</div>
</div>
<div class="page">
<div id="mantletext">
<h3>
jQuery</h3>
<h2>
Wanderwall 4</h2>
</div>
</div>
在現實生活中，你可能會定義一些非常簡單的CSS的設計結構。但為了簡單起見，我首先要告訴你在這個項目中的重要組成部分的JavaScript，然后是CSS3。（我建議你先完成javascript端的部分，再去修改設計。不過，你怎么舒服怎么做吧）。
背景動畫的JQuery代碼（frame hover）：
$("div.frame a").hover(function()
{
/*Strip the link identifier to form just the ID*/
var id = this.id.replace("link", "");
var currentLink = $(this);
/*ID based hiding of the other frames*/
hideTheRest(id);
position = -296*id;
/*Define the offset at which the page for this frame is present*/
marginnew = pagewidth * id * -1;
/*Show the Home link if not on the Default page*/
if(id > 0)
{
$('#homelink').show();
}else{
$('#homelink').hide();
}
/*Animate the Page Slider to the new offset*/
$('.pageslider').stop().animate({marginLeft: marginnew}, 800);
/*Animate the header background*/
$('#wanderwall').stop().animate({backgroundPosition: '(50% ' + position +'px )'}, 500, function()
{
var distance = 0;
var topdis = -190;
var text = currentLink.attr('alt');
var infoframe = $('#infoframe');
/*Define the offset for the header-wallpaper text to appear next to the frame*/
switch(id)
{
case "1":
distance = 500;
break;
case "2":
distance = 730;
break;
case "3":
distance = 200;
break;
case "4":
distance = 400;
topdis = -198;
break;
}
infoframe.html(text);
infoframe.css('margin-left', distance + 'px');
infoframe.css('margin-top', topdis + 'px');
infoframe.fadeIn();
});
}, function()
{
$('#infoframe').hide();
var id = this.id.replace("link", "");
$('#wanderwall').stop().animate({backgroundPosition: '(50% 0px)'}, 500 );
showTheRest();
});
懸浮的時候顯示或隱藏其他元素的JQuery代碼：
function hideTheRest(id){
for (var i=1; i<5; i++){
if (i!=id)
{
$('#frame' + i + ' a').css('display', 'block');
$('#frame' + i).css('filter', 'alpha(opacity=90)');
$('#frame' + i).stop().fadeTo("fast",0);
$('#frame' + i + ' a').css('display', 'none');
}
}
$('#infoframe').css('visibility','visible');
}
以上是一些關于懸浮墻重要的JS代碼片段。如果你想從深層次研究代碼。你可以在下邊下載源代碼。下面讓我們看看重要的CSS：
CSS的背景梯度和3D覆蓋：
下載源代碼。下面讓我們看看重要的CSS：
body{
background:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(153,153,153)),
color-stop(0.55, rgb(242,242,242)),
color-stop(0.78, rgb(240,237,240))
);
background:
-moz-linear-gradient(
center bottom,
rgb(153,153,153) 9%,
rgb(242,242,242) 55%,
rgb(240,237,240) 78%
);
}
#mantle { width:100%; height:30px; background:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(153,153,153)),
color-stop(0.55, rgb(242,242,242)),
color-stop(0.78, rgb(252,252,252))
);
background:
-moz-linear-gradient(
center bottom,
rgb(153,153,153) 9%,
rgb(242,242,242) 55%,
rgb(252,252,252) 78%
);
-webkit-background-origin: padding;
-webkit-background-clip: content;
border-bottom:1px solid #fff;
}
Frame旋轉的CSS3：
.frame:hover{
-webkit-transform: rotate(-9deg); -moz-transform: rotate(-9deg);
}
跨瀏覽器的@ font – face
@font-face {
font-family: 'LeagueGothicRegular';
src: url('league_gothic-webfont.eot');
src: local('?'), url('league_gothic-webfont.woff') format('woff'), url('league_gothic-webfont.ttf') format('truetype'), url('league_gothic-webfont.svg#webfontwJ2IAlek') format('svg');
font-weight: normal;
font-style: normal;
}
OK。這就是全部了。
下邊是demo在線展示和源碼地址。由于我沒地方上傳字體文件。字體會沒有源代碼里的漂亮。
由于IE9之前的IE瀏覽器不支持CSS3和部分HTML5。推薦使用chrome/Firefox/IE9瀏覽器：）
參考地址：http://addyosmani.com/blog/wanderwall/
浙公網安備 33010602011771號