以下是 jQuery全屏背景图片导航菜单代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.useso.com/css?family=PT+Sans:400,700|Merriweather:400italic,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script language="javascript" src="js/modernizr.js"></script> <!-- Modernizr -->
<!-- .project-container -->
<script language="javascript" src="js/jquery-2.1.1.js"></script>
<script language="javascript" src="js/main.js"></script>
<!-- Resource jQuery -->
<title>jQuery全屏背景图片导航菜单代码 - 内容</title>
</head>
<body>
<div class="projects-container">
<ul>
<li>
<div class="cd-title">
<h2>
主页
</h2>
<p>
jQuery从1.4-2.1版本下载
</p>
</div>
</li>
<li>
<div class="cd-title">
<h2>
内容
</h2>
<p>
leanModal.js轻巧的弹出层插件
</p>
</div>
<div class="cd-project-info">
<p>
来源：<a href="#" target="_blank">内容</a>
</p>
</div>
</li>
<li>
<div class="cd-title">
<h2>
设置
</h2>
<p>
wysiwyg微小的Bootstrap富文本编辑器
</p>
</div>
<div class="cd-project-info">
<p>
bootstrap-wysiwyg是一款支持移动设备浏览器，支持图片上传，支持语音识别输入功能的微小富文本编辑器。
</p>
</div>
</li>
<li>
<div class="cd-title">
<h2>
关于
</h2>
<p>
Blueprint - 滑动和推动菜单插件
</p>
</div>
<div class="cd-project-info">
<p>
本文演示了Blueprint在不同位置六种滑动菜单效果。
</p>
</div>
</li>
</ul>
<a href="#0" class="cd-close">Close</a>
<a href="#0" class="cd-scroll">Scroll</a>
</div>
</body>
</html>
JS代码(main.js):
jQuery(document).ready(function($){
//check if background-images have been loaded and show list items $('.projects-container li').bgLoaded({
afterLoaded:function(){
showCaption($('.projects-container li').eq(0));
}
}
);
//open project $('.projects-container li').on('click',function(){
var selectedProject = $(this),toggle = !selectedProject.hasClass('is-full-width');
if (toggle) toggleProject($(this),$('.projects-container'),toggle);
}
);
//close project $('.projects-container .cd-close').on('click',function(){
toggleProject($('.is-full-width'),$('.projects-container'),false);
}
);
//scroll to project info $('.projects-container .cd-scroll').on('click',function(){
$('body,html').animate({
'scrollTop':$(window).height()}
,500);
}
);
//update title and .cd-scroll opacity while scrolling $(window).on('scroll',function(){
window.requestAnimationFrame(changeOpacity);
}
);
function toggleProject(project,container,bool){
if (bool){
//expand project container.addClass('project-is-open');
project.addClass('is-full-width').siblings('li').removeClass('is-loaded');
}
else{
//check media query var mq = window.getComputedStyle(document.querySelector('.projects-container'),'::before').getPropertyValue('content'),delay = (mq == 'mobile') ? 100:0;
container.removeClass('project-is-open');
//fade out project project.animate({
opacity:0}
,800,function(){
project.removeClass('is-loaded');
$('.projects-container').find('.cd-scroll').attr('style','');
setTimeout(function(){
project.attr('style','').removeClass('is-full-width').find('.cd-title').attr('style','');
}
,delay);
setTimeout(function(){
showCaption($('.projects-container li').eq(0));
}
,300);
}
);
}
}
function changeOpacity(){
var newOpacity = 1 - $(window).scrollTop() / 300;
$('.projects-container .cd-scroll').css('opacity',newOpacity);
$('.is-full-width .cd-title').css('opacity',newOpacity);
}
function showCaption(project){
if (project.length > 0){
setTimeout(function(){
project.addClass('is-loaded');
showCaption(project.next());
}
,150);
}
}
}
);
/* * BG Loaded * Copyright (c) 2014 Jonathan Catmull * Licensed under the MIT license. */
(function($){
$.fn.bgLoaded = function(custom){
var self = this;
// Default plugin settings var defaults ={
afterLoaded:function(){
this.addClass('bg-loaded');
}
}
;
// Merge default and user settings var settings = $.extend({
}
,defaults,custom);
// Loop through element self.each(function(){
var $this = $(this),bgImgs = window.getComputedStyle($this.get(0),'::before').getPropertyValue('content').replace(/'/g,"").replace(/"/g,"").split(',');
$this.data('loaded-count',0);
$.each(bgImgs,function(key,value){
var img = value.replace(/^url\(["']?/,'').replace(/["']?\)$/,'');
$('<img/>').attr('src',img).load(function(){
$(this).remove();
// prevent memory leaks $this.data('loaded-count',$this.data('loaded-count') + 1);
if ($this.data('loaded-count') >= bgImgs.length){
settings.afterLoaded.call($this);
}
}
);
}
);
}
);
}
;
}
)(jQuery);
CSS代码(reset.css):
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
CSS代码(style.css):
/* --------------------------------Primary style-------------------------------- */
*,*::after,*::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html{font-size:62.5%;}
body{font-size:1.6rem;font-family:"PT Sans",sans-serif;color:#ffffff;background-color:#101524;overflow-x:hidden}
a{color:#9e1c51;text-decoration:none;}
/* --------------------------------Main Components-------------------------------- */
.projects-container{height:100vh;width:100vw;position:relative;}
.projects-container::before{/* never visible - this is used in jQuery to check the current MQ */
content:'mobile';display:none;}
.projects-container li{position:absolute;top:0;left:0;width:100%;height:25%;overflow:hidden;cursor:pointer;-webkit-transition:-webkit-transform 0.4s;-moz-transition:-moz-transform 0.4s;transition:transform 0.4s;/* on mobile - move items outside the viewport */
-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%);}
.projects-container li::after{/* background image */
content:'';position:absolute;top:0;left:0;height:25vh;width:100%;background-image:url("../img/img-1-small.jpg");background-repeat:no-repeat;background-position:center center;background-size:cover;-webkit-transition:opacity 0.5s,height 0.4s;-moz-transition:opacity 0.5s,height 0.4s;transition:opacity 0.5s,height 0.4s;}
.projects-container li::before{/* never visible - this is used in jQuery to detect if the background image has been loaded */
content:'img/img-1-small.jpg';display:none;}
.projects-container li:nth-of-type(2){top:25vh;}
.projects-container li:nth-of-type(2)::after{background-image:url("../img/img-2-small.jpg");}
.projects-container li:nth-of-type(2)::before{content:'img/img-2-small.jpg';}
.projects-container li:nth-of-type(3){top:50vh;}
.projects-container li:nth-of-type(3)::after{background-image:url("../img/img-3-small.jpg");}
.projects-container li:nth-of-type(3)::before{content:'img/img-3-small.jpg';}
.projects-container li:nth-of-type(4){top:75vh;}
.projects-container li:nth-of-type(4)::after{background-image:url("../img/img-4-small.jpg");}
.projects-container li:nth-of-type(4)::before{content:'img/img-4-small.jpg';}
.projects-container li.is-loaded{/* move items in the viewport when background images have been loaded */
-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}
.projects-container li.is-full-width{/* selected item */
top:0;height:auto;z-index:1;cursor:auto;-webkit-transition:z-index 0s 0s,top 0.4s 0s;-moz-transition:z-index 0s 0s,top 0.4s 0s;transition:z-index 0s 0s,top 0.4s 0s;}
.projects-container li.is-full-width::after{height:100vh;}
@media only screen and (min-width:1024px){.projects-container::before{/* never visible - this is used in jQuery to check the current MQ */
content:'desktop';}
.projects-container li{width:25vw;height:100%;opacity:0;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);-webkit-transition:width 0s;-moz-transition:width 0s;transition:width 0s;}
.projects-container li:first-of-type::before{content:'img/img-1-large.jpg';}
.projects-container li:first-of-type::after{background-image:url("../img/img-1-large.jpg");}
.projects-container li:nth-of-type(2){top:0;left:25vw;}
.projects-container li:nth-of-type(2)::before{content:'img/img-2-large.jpg';}
.projects-container li:nth-of-type(2)::after{background-image:url("../img/img-2-large.jpg");}
.projects-container li:nth-of-type(3){top:0;left:50vw;}
.projects-container li:nth-of-type(3)::before{content:'img/img-3-large.jpg';}
.projects-container li:nth-of-type(3)::after{background-image:url("../img/img-3-large.jpg");}
.projects-container li:nth-of-type(4){top:0;left:75vw;}
.projects-container li:nth-of-type(4)::before{content:'img/img-4-large.jpg';}
.projects-container li:nth-of-type(4)::after{background-image:url("../img/img-4-large.jpg");}
.projects-container li::after{height:100vh;width:100%;opacity:0;}
.projects-container li.is-loaded{/* show items when background images have been loaded */
opacity:1;}
.projects-container li.is-loaded::after{opacity:1;}
.projects-container li.is-full-width{/* selected item */
left:0vw;width:100vw;-webkit-transition:width 0.4s 0s,z-index 0s 0s,left 0.4s 0s;-moz-transition:width 0.4s 0s,z-index 0s 0s,left 0.4s 0s;transition:width 0.4s 0s,z-index 0s 0s,left 0.4s 0s;}
}
@media only screen and (min-width:1170px){.projects-container li::after{background-attachment:fixed;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);-webkit-transition:-webkit-transform 0.8s,opacity 0.5s;-moz-transition:-moz-transform 0.8s,opacity 0.5s;transition:transform 0.8s,opacity 0.5s;}
.projects-container li.is-loaded::after{opacity:0;}
.no-touch .projects-container li:hover::after,.projects-container li.is-full-width.is-loaded::after{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
}
.cd-title{position:absolute;z-index:1;left:0;top:12.5vh;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);width:100%;text-align:center;}
.is-full-width .cd-title{top:50vh;-webkit-transition:opacity 0s,top 0.4s;-moz-transition:opacity 0s,top 0.4s;transition:opacity 0s,top 0.4s;}
.cd-title > *{text-shadow:0 1px 4px rgba(0,0,0,0.2);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.cd-title h2{font-size:2.5rem;line-height:1.5;font-weight:700;}
.cd-title p{font-size:1.4rem;font-family:"Merriweather",serif;font-style:italic;line-height:1.2;padding:.4em 2em;display:none;opacity:.6;}
@media only screen and (min-width:1024px){.cd-title{top:50vh;width:25vw;opacity:0;-webkit-transform:translateY(-50%) translateX(-20px);-moz-transform:translateY(-50%) translateX(-20px);-ms-transform:translateY(-50%) translateX(-20px);-o-transform:translateY(-50%) translateX(-20px);transform:translateY(-50%) translateX(-20px);}
.is-loaded .cd-title{opacity:1;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:-webkit-transform 0.6s,opacity 0.6s,left 0.4s;-moz-transition:-moz-transform 0.6s,opacity 0.6s,left 0.4s;transition:transform 0.6s,opacity 0.6s,left 0.4s;}
.is-loaded.is-full-width .cd-title{left:37.5vw;-webkit-transition:-webkit-transform 0.6s,opacity 0s,left 0.4s;-moz-transition:-moz-transform 0.6s,opacity 0s,left 0.4s;transition:transform 0.6s,opacity 0s,left 0.4s;}
.cd-title p{display:block;}
}
@media only screen and (min-width:1170px){.cd-title h2{font-size:3.6rem;}
}
.cd-project-info{clear:both;visibility:hidden;opacity:0;margin-top:100vh;padding:4em 0;cursor:auto;background-color:#ffffff;color:#3f538e;-webkit-transition:opacity 0.4s 0s,visibility 0s 0.4s;-moz-transition:opacity 0.4s 0s,visibility 0s 0.4s;transition:opacity 0.4s 0s,visibility 0s 0.4s;}
.is-full-width .cd-project-info{visibility:visible;opacity:1;}
.cd-project-info p{width:90%;max-width:800px;margin:0 auto;line-height:2;}
@media only screen and (min-width:1024px){.cd-project-info{position:relative;z-index:1;}
}
.projects-container .cd-close,.projects-container .cd-scroll{display:block;z-index:1;width:44px;height:44px;/* image replacement */
overflow:hidden;text-indent:100%;white-space:nowrap;visibility:hidden;-webkit-transition:-webkit-transform 1s 0s,visibility 0s 1s;-moz-transition:-moz-transform 1s 0s,visibility 0s 1s;transition:transform 1s 0s,visibility 0s 1s;}
.projects-container .cd-close{position:fixed;top:30px;right:5%;background:url("../img/cd-icon-close-mobile.svg") no-repeat center center;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);}
@media only screen and (min-width:1170px){.projects-container .cd-close{background-image:url("../img/cd-icon-close-desktop.svg");}
}
.projects-container .cd-scroll{position:absolute;bottom:30px;left:50%;-webkit-transform:translateX(-50%) scale(0);-moz-transform:translateX(-50%) scale(0);-ms-transform:translateX(-50%) scale(0);-o-transform:translateX(-50%) scale(0);transform:translateX(-50%) scale(0);background:url("../img/cd-icon-arrow-mobile.svg") no-repeat center center;}
@media only screen and (min-width:1170px){.projects-container .cd-scroll{background-image:url("../img/cd-icon-arrow-desktop.svg");}
}
.project-is-open .cd-close,.project-is-open .cd-scroll{visibility:visible;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform 0.4s 0s,visibility 0s 0s;-moz-transition:-moz-transform 0.4s 0s,visibility 0s 0s;transition:transform 0.4s 0s,visibility 0s 0s;}
.project-is-open .cd-scroll{-webkit-transform:translateX(-50%) scale(1);-moz-transform:translateX(-50%) scale(1);-ms-transform:translateX(-50%) scale(1);-o-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1);-webkit-animation:cd-translate 1.2s 0.4s;-moz-animation:cd-translate 1.2s 0.4s;animation:cd-translate 1.2s 0.4s;-webkit-animation-iteration-count:2;-moz-animation-iteration-count:2;animation-iteration-count:2;}
.no-touch .project-is-open .cd-close:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);}
.no-touch .project-is-open .cd-scroll:hover{-webkit-transform:translateX(-50%) scale(1.2);-moz-transform:translateX(-50%) scale(1.2);-ms-transform:translateX(-50%) scale(1.2);-o-transform:translateX(-50%) scale(1.2);transform:translateX(-50%) scale(1.2);}
@-webkit-keyframes cd-translate{0%{-webkit-transform:translateX(-50%) scale(1);}
50%{-webkit-transform:translateY(10px) translateX(-50%) scale(1);}
100%{-webkit-transform:translateX(-50%) scale(1);}
}
@-moz-keyframes cd-translate{0%{-moz-transform:translateX(-50%) scale(1);}
50%{-moz-transform:translateY(10px) translateX(-50%) scale(1);}
100%{-moz-transform:translateX(-50%) scale(1);}
}
@keyframes cd-translate{0%{-webkit-transform:translateX(-50%) scale(1);-moz-transform:translateX(-50%) scale(1);-ms-transform:translateX(-50%) scale(1);-o-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1);}
50%{-webkit-transform:translateY(10px) translateX(-50%) scale(1);-moz-transform:translateY(10px) translateX(-50%) scale(1);-ms-transform:translateY(10px) translateX(-50%) scale(1);-o-transform:translateY(10px) translateX(-50%) scale(1);transform:translateY(10px) translateX(-50%) scale(1);}
100%{-webkit-transform:translateX(-50%) scale(1);-moz-transform:translateX(-50%) scale(1);-ms-transform:translateX(-50%) scale(1);-o-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1);}
}
分享到QQ
分享到微博
微信扫一扫
