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。这就是全部了。
由于IE9之前的IE浏览器不支持CSS3和部分HTML5。推荐使用chrome/Firefox/IE9浏览器：）