如何使用CSS3+JQuery實(shí)現(xiàn)懸浮墻式菜單
前言
大家好，今天我要教你如何創(chuàng)建一個(gè)有用的懸停式用戶界面，使用jQuery，CSS3，HTML5和@ font – face。你可能會(huì)問(wèn)我，為什么是一個(gè)基于懸停的用戶界面？好吧，由于現(xiàn)在很流行的基礎(chǔ)觸摸的web站點(diǎn)可以運(yùn)行在移動(dòng)設(shè)備上，我認(rèn)為我們可以讓那些基于桌面瀏覽器的人們使用站點(diǎn)更加簡(jiǎn)單。
什么是懸停界面？
懸停界面就是只需要做少量的工作就可以瀏覽更多的內(nèi)容。比起傳統(tǒng)的基于頁(yè)面的點(diǎn)擊，我們需要改變一些想法和設(shè)計(jì)結(jié)構(gòu)，可以讓用戶知道怎樣通過(guò)基于懸停墻來(lái)瀏覽更多的內(nèi)容。
如果你瀏覽一些最流行的網(wǎng)站。你會(huì)發(fā)現(xiàn)實(shí)際上他們有兩個(gè)版本。一個(gè)用于桌面瀏覽器（完整布局），另一個(gè)是優(yōu)化移動(dòng)（觸摸集中）。某些情況下，在傳統(tǒng)的網(wǎng)站上也可以使用懸停界面來(lái)提高用戶的體驗(yàn)。
懸浮墻是如何工作的？
懸浮墻由兩個(gè)關(guān)鍵的組件交互：
1.頭滑塊：當(dāng)用戶停留超過(guò)1個(gè)frame的時(shí)候。一個(gè)動(dòng)畫(huà)效果轉(zhuǎn)到了一個(gè)獨(dú)特的背景，具體是到特定鏈接標(biāo)題壁紙的位置。當(dāng)頭部的壁紙完全呈現(xiàn)時(shí)，顯現(xiàn)出一些特殊的文字，例如標(biāo)題或網(wǎng)站的標(biāo)語(yǔ)。
2.頁(yè)面滑塊：在頭滑塊滑動(dòng)的同時(shí)呈現(xiàn)。用戶可以通過(guò)點(diǎn)擊一個(gè)鏈接，查看相應(yīng)的“頁(yè)”元素幻燈片。（這基本上是一個(gè)div，其中可以包含文字，圖像，視頻-任何HTML內(nèi)容）
當(dāng)懸停離開(kāi)當(dāng)前的鏈接，頭滑塊會(huì)變成默認(rèn)的背景。頁(yè)面滑塊保持原有狀態(tài)。這樣做的原因是，如果頁(yè)面滑塊呈現(xiàn)了進(jìn)一步的內(nèi)容。用戶可能希望停留在這個(gè)頁(yè)面上，向下滾動(dòng)或單擊。
懸浮墻使如何使用CSS3的@ font - face的和HTML5？
在懸浮墻中CSS3的用于使文本緊湊，背景梯度和旋轉(zhuǎn)的造型和設(shè)計(jì)。我們可以選擇我們喜歡的背景圖片。@font-face大多數(shù)情況下用戶排版?？鐬g覽器的情況下也可以表現(xiàn)出漂亮的字體。
讓我們開(kāi)始創(chuàng)建一個(gè)懸浮墻：
header frame 的HTML：
<div id="wanderwall"> <div class="wrapper"> <div id="frame1" class="frame first"> <a style="display: block;" id="link1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" alt="Font-Face powers the fonts"><span> @font-face</span> </a> </div> </div> </div>
滑塊頁(yè)的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>
在現(xiàn)實(shí)生活中，你可能會(huì)定義一些非常簡(jiǎn)單的CSS的設(shè)計(jì)結(jié)構(gòu)。但為了簡(jiǎn)單起見(jiàn)，我首先要告訴你在這個(gè)項(xiàng)目中的重要組成部分的JavaScript，然后是CSS3。（我建議你先完成javascript端的部分，再去修改設(shè)計(jì)。不過(guò)，你怎么舒服怎么做吧）。
背景動(dòng)畫(huà)的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();
});
懸浮的時(shí)候顯示或隱藏其他元素的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');
}
以上是一些關(guān)于懸浮墻重要的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旋轉(zhuǎn)的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。這就是全部了。
由于IE9之前的IE瀏覽器不支持CSS3和部分HTML5。推薦使用chrome/Firefox/IE9瀏覽器：）
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Jquery使用val方法讀寫(xiě)value值,實(shí)例分析了jQuery中val方法獲取value值與賦值操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
jQuery實(shí)現(xiàn)表格奇偶行顯示不同背景色 就這么簡(jiǎn)單
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格奇偶行顯示不同背景色的方法，使表格更加美觀，便捷的查找同行數(shù)據(jù)更，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
jQuery EasyUI API 中文文檔 - PropertyGrid屬性表格
jQuery EasyUI API 中文文檔 - PropertyGrid屬性表格使用介紹，需要的朋友可以參考下。2011-11-11
Jquery檢驗(yàn)手機(jī)號(hào)是否符合規(guī)則并根據(jù)手機(jī)號(hào)檢測(cè)結(jié)果將提交按鈕設(shè)為不同狀態(tài)
接了個(gè)項(xiàng)目做，需要是這樣的：輸入手機(jī)號(hào)，實(shí)時(shí)判斷輸入的手機(jī)號(hào)是否符合規(guī)則，如果不符合怎么處理，符合又怎么處理等一系列問(wèn)題，本篇文章給大家介紹Jquery檢驗(yàn)手機(jī)號(hào)是否符合規(guī)則并根據(jù)手機(jī)號(hào)檢測(cè)結(jié)果將提交按鈕設(shè)為不同狀態(tài)，感興趣的朋友參考下2015-11-11
jQuery實(shí)現(xiàn)別踩白塊兒網(wǎng)頁(yè)版小游戲
本文主要介紹了jQuery實(shí)現(xiàn)別踩白塊兒網(wǎng)頁(yè)版小游戲的思路分析與代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
超贊的jQuery圖片滑塊動(dòng)畫(huà)特效代碼匯總
本文將為大家收集10個(gè)超贊的jQuery圖片滑塊動(dòng)畫(huà),都是小編精挑細(xì)選而來(lái)，希望這些現(xiàn)成的jQuery插件將為你節(jié)省很多開(kāi)發(fā)時(shí)間。2016-01-01
本篇文章是基于JQuery在線制作的ppt在線演示，非常高大尚，效果非常好，需要的朋友可以參考下。2015-09-09
基于jquery實(shí)現(xiàn)一張圖片點(diǎn)擊鼠標(biāo)放大再點(diǎn)縮小
一張圖片點(diǎn)擊鼠標(biāo)放大，再點(diǎn)縮小基于jquery1.8.3實(shí)現(xiàn)，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-09-09
DIV+CSS+jQ實(shí)現(xiàn)省市聯(lián)動(dòng)可擴(kuò)展
這篇文章主要介紹了DIV+CSS+jQ實(shí)現(xiàn)省市聯(lián)動(dòng)可擴(kuò)展方法的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JQUERY 瀏覽器判斷實(shí)現(xiàn)函數(shù)
JQUERY 瀏覽器判斷實(shí)現(xiàn)函數(shù)，如果只是為了判斷瀏覽器不建議用，如果你已經(jīng)用了jquery才用啊，要不沒(méi)必要因?yàn)檫@個(gè)小功能，加個(gè)那么大的類(lèi)庫(kù)吧。2009-08-08