<!--
* 全背景更换幻灯,对JS进行改动，实现自动切换
* 摘自：http://www.bigspaceship.com/
-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>HTML 5 Text</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
var t=setInterval('$("div.feature-bg:visible div.feature-btn:last").trigger("click")',5000); //隔五秒自动换
//鼠标放按钮上时去掉自动切换
$('div.feature-btn').hover(
function(){clearInterval(t)},
function(){t =setInterval('$("div.feature-bg:visible div.feature-btn:last").trigger("click")',5000)}
);
//点击切换
$('div.feature-btn').click(function(){
var target = $(this).data('target');
trackBtn(this);
$(this).parents('div.feature-bg,div.feature-container').fadeOut(200,function(){
$('div.feature-bg[data-project="'+target+'"]').children('div.feature-container').andSelf().fadeIn(700);
});
});
function trackBtn(self) {
var label = 'unknown';
if ($(self).hasClass('left')) {
label = 'left'
}
if ($(self).hasClass('right')) {
label = 'right'
}
//_gaq.push(['_trackEvent', 'Home Slideshow', 'Rotate Home', label]);
}
$('div.title a').click(function(){
var title = $(this).attr('title');
//_gaq.push(['_trackEvent', 'Home Slideshow', 'Project Click', title]);
});
});
</script>
<style>
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; font-weight:normal }
body { line-height:1 }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
nav ul { list-style:none }
blockquote, q { quotes:none }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent }
html { background:transparent url('http://www.bigspaceship.com/wordpress/wp-content/themes/bigspaceship.com/lib/img/html-bg.png') center 1100px repeat scroll }
body { width:100%; background-color:#eaeeef; color:#303d44; font-family:'Avenir LT W02 55 Roman', Helvetica, Arial, sans-serif; font-size:10px; min-width:1032px }
body a { color:#b10000; font-family:'Avenir LT W02 95 Black', Helvetica, Arial, sans-serif; text-decoration:none }
body a:hover { color:#e62424 }
/*Header*/
.nav-spacer { height:64px }
header { height:69px; width:100%; margin:0; position:fixed; z-index:99999; background:transparent url('http://www.bigspaceship.com/wordpress/wp-content/themes/bigspaceship.com/lib/img/ribbon_sprite.png') top center no-repeat }
header.has-subnav nav { height:64px }
header.has-subnav div.contact { top:0 }
header nav { position:relative; background:transparent url("http://www.bigspaceship.com/wordpress/wp-content/themes/bigspaceship.com/lib/img/ribbon_sprite.png") center -390px repeat-x scroll; width:100%; max-width:1032px; height:69px; margin:0 auto; color:#e58c8c; font-family:'Avenir LT W02 95 Black', Helvetica, Arial, sans-serif; font-size:14px; display:block; font-weight:normal }
header nav a { color:white }
header nav a:hover { color:#d89495 }
header nav li.current a { color:#d89495 }
header nav .container { display:block; min-width:804px; padding-left:228px; padding-top:25px; padding-bottom:25px; height:15px; overflow:visible }
header nav h1 { display:inline }
header nav h1 a { width:138px; height:22px; display:block; float:left; text-indent:-999em; background:transparent url('http://www.bigspaceship.com/wordpress/wp-content/themes/bigspaceship.com/lib/img/bss_logo.png') top left no-repeat; margin-left:46px; margin-top:24px; margin-bottom:16px }
header nav ul { list-style:none; display:inline; padding:0 0 0 15px }
header nav ul li { float:left; width:auto }
header nav ul li a { display:block; padding:3px 10px; text-align:center; border-right:1px solid #8a0b05 }
header nav ul li:last-child a { border-right:0 }
header nav ul li.current { background:url("http://www.bigspaceship.com/wordpress/wp-content/themes/bigspaceship.com/lib/img/topNavCurrentItem.png") no-repeat scroll center bottom transparent; display:inline-table; height:52px }
header nav ul li.current.contactOpen { display:inline-table; height:30px; background:0 }
header nav aside { margin-top:3px; display:inline; float:right; margin-right:44px; padding-right:15px; background:url("http://www.bigspaceship.com/wordpress/wp-content/themes/bigspaceship.com/lib/img/arrows/arrow_sm_right.png") no-repeat scroll right 0 transparent }
header div.contact { max-width:1032px; margin:0 auto; background-color:#1a2127; height:75px; position:relative; top:-5px; z-index:9999 }
header div.contact .container { width:945px; margin:auto }
header div.contact section#details div { height:60px; width:234px; float:left; margin-top:6px; border-right:1px solid #2d3339 }
header div.contact section#details div h5 { font-family:'Avenir LT W02 65 Medium', Helvetica, Arial, sans-serif; font-size:1.2em; letter-spacing:.1em; line-height:1; text-transform:uppercase; color:#8d969a; margin:10px 0 10px 15px }
header div.contact section#details div a, header div.contact section#details div p { margin-left:15px; font-size:16px; color:white }
header div.contact section#details div a:hover { color:#cacaca }
header div.contact section#details div#phone, header div.contact section#details div#social, header div.contact section#details div#credits { border-right:0 }
/*Project*/
section#features.homepage { background-color:transparent; overflow:hidden; height:450px }
section#features.homepage div.feature-bg div.feature-container { width:1024px; background:transparent center top no-repeat scroll; margin:0 auto; height:450px; text-align:center }
section#features.homepage div.feature-bg div.feature-container img.masthead { position:relative; max-height:450px; max-width:1024px }
section#features.homepage div.feature-bg div.feature-container div.title { background:#232d35; display:inline-block; padding:15px 51px; min-width:180px; position:relative; top:-120px }
section#features.homepage div.feature-bg div.feature-container div.title div.feature-btn { height:100%; position:absolute; top:0; width:36px; background:transparent url('http://www.bigspaceship.com/wordpress/wp-content/themes/bigspaceship.com/lib/img/arrows/arrows-slideshow-sprite.png'); background-position:0 center; background-repeat:no-repeat; background-attachment:scroll }
section#features.homepage div.feature-bg div.feature-container div.title div.feature-btn.left { background-position:0 center; left:0; margin-left:0 }
section#features.homepage div.feature-bg div.feature-container div.title div.feature-btn.left:hover { background-position:-36px center; cursor:pointer }
section#features.homepage div.feature-bg div.feature-container div.title div.feature-btn.right { background-position:-108px center; right:0; margin-right:0 }
section#features.homepage div.feature-bg div.feature-container div.title div.feature-btn.right:hover { background-position:-72px center; cursor:pointer }
section#features.homepage div.feature-bg div.feature-container div.title h2 { font-family:'Garamond W01 Italic', Garamond, serif; font-size:3.5em; line-height:1; color:white }
section#features.homepage div.feature-bg div.feature-container div.title h2:hover { color:#cacaca }
section#features.homepage div.feature-bg div.feature-container div.title h3 { font-family:'Avenir LT W02 65 Medium', Helvetica, Arial, sans-serif; font-size:1em; letter-spacing:.1em; line-height:1; color:#8d969a; text-transform:uppercase; margin-top:10px }
/*tagline*/
section#tagline { width:100%; margin:0 auto -6px auto; background:transparent url('http://www.bigspaceship.com/wordpress/wp-content/themes/bigspaceship.com/lib/img/ribbon_sprite.png') center -69px repeat-y scroll; height:64px; z-index:799; position:relative; top:-10px }
section#tagline .container { max-width:1032px; width:100%; margin:auto; text-align:center; background:transparent url('http://www.bigspaceship.com/wordpress/wp-content/themes/bigspaceship.com/lib/img/ribbon_sprite.png') center -268px no-repeat scroll; height:68px; z-index:999 }
section#tagline .container h1 { color:white; font-family:'Garamond W01', Garamond, serif; font-size:2.4em; line-height:1.1; line-height:72px }
section#tagline .container h1 a { font-family:'Garamond W01', Garamond, serif; font-size:1em; color:#8d969a }
section#tagline .container h1 a:hover { color:#b10000 }
section#clients { width:1024px; padding:0 0 30px 0; margin:0 auto; background:#f2f5f6; display:block; min-height:120px }
section#clients .container { margin:0 auto; width:95%; max-width:960px }
section#clients h3 { font-family:'Avenir LT W02 95 Black', Helvetica, Arial, sans-serif; font-size:2em; line-height:1; padding:23px 0; border-top:1px solid #e1e5e6 }
section#clients article { float:left; clear:right; border-right:1px solid #e1e5e6 }
section#clients article p.date { font-family:'Avenir LT W02 65 Medium', Helvetica, Arial, sans-serif; font-size:1em; letter-spacing:.1em; line-height:1; color:#8d969a; text-transform:uppercase; margin-top:20px }
</style>
</head>
<body>
<!--[if IE 6]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style>
/*
CSS rules to use for styling the overlay:
.chromeFrameOverlayContent
.chromeFrameOverlayContent iframe
.chromeFrameOverlayCloseBar
.chromeFrameOverlayUnderlay
*/
</style>
<script>
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://www.bigspaceship.com"
});
</script>
<![endif]-->
<div class = "nav-spacer">
<header>
<nav>
<h1><a href="http://www.bigspaceship.com">Big Spaceship</a></h1>
<div class = "container" >
<ul>
<li ><a href="http://www.bigspaceship.com/who-we-are/">About Us</a></li>
<li ><a href="http://www.bigspaceship.com/our-work/">Our Work</a></li>
<li ><a href="http://www.bigspaceship.com/category/our-thinking/">Our Thinking</a></li>
<li ><a href="http://www.bigspaceship.com/category/news-events/">News & Events</a></li>
<li ><a href="http://www.bigspaceship.com/join-us/">Join Us</a></li>
</ul>
<aside class = "homepage" > <a class = "contact" href="#contact">Get in Touch</a> </aside>
</div>
</nav>
<div class = "contact" style = "display:none;" >
<div class = "container" >
<section id="details">
<div id="biz">
<h5>New Business</h5>
<a href="mailto:biz@bigspaceship.com">biz@bigspaceship.com</a> </div>
<div id="info">
<h5>General Inquiries</h5>
<a href="mailto:info@bigspaceship.com">info@bigspaceship.com</a> </div>
<div id="press">
<h5>Media Inquiries</h5>
<a href="mailto:press@bigspaceship.com">press@bigspaceship.com</a> </div>
<div id="phone">
<h5>Phone</h5>
<a href="tel:1-718-222-0281">(718) 222-0281</a> </div>
</section>
</div>
</div>
</header>
</div>
<section id="features" class = "homepage full" >
<!-- begin Features -->
<!-- Feature Project -->
<div class="feature-bg" data-project="crayola-gift-guide" style="display: block; background-color: #f5f5f5;">
<div class="feature-container"> <img src="http://www.bigspaceship.com/wordpress/wp-content/uploads/2012/01/gg-BSSmasthead-001a.jpg" class="masthead" data-project="crayola-gift-guide" />
<div class="title">
<div class="feature-btn left" data-target="activate"></div>
<a href="http://www.bigspaceship.com/projects/crayola-gift-guide/" title="Crayola Gift Guide">
<h2 class="name">Crayola Gift Guide</h2>
<h3 class="client">Crayola</h3>
</a>
<div class="feature-btn right" data-target="chobani-champions"></div>
</div>
</div>
</div>
<!-- /Feature Project -->
<!-- Feature Project -->
<div class="feature-bg" data-project="chobani-champions" style="display: none; background-color: #f6f6f6;">
<div class="feature-container"> <img src="http://www.bigspaceship.com/wordpress/wp-content/uploads/2011/11/proj_masthead_template_chobaniChampions.jpg" class="masthead" data-project="chobani-champions" />
<div class="title">
<div class="feature-btn left" data-target="crayola-gift-guide"></div>
<a href="http://www.bigspaceship.com/projects/chobani-champions/" title="Chobani Champions">
<h2 class="name">Chobani Champions</h2>
<h3 class="client">Chobani Champions</h3>
</a>
<div class="feature-btn right" data-target="starwars-com"></div>
</div>
</div>
</div>
<!-- /Feature Project -->
<!-- Feature Project -->
<div class="feature-bg" data-project="starwars-com" style="display: none; background-color: #000000;">
<div class="feature-container"> <img src="http://www.bigspaceship.com/wordpress/wp-content/uploads/2011/11/starwars_pm1.jpg" class="masthead" data-project="starwars-com" />
<div class="title">
<div class="feature-btn left" data-target="chobani-champions"></div>
<a href="http://www.bigspaceship.com/projects/starwars-com/" title="Star Wars">
<h2 class="name">Star Wars</h2>
<h3 class="client">Lucasfilm</h3>
</a>
<div class="feature-btn right" data-target="what-do-you-love"></div>
</div>
</div>
</div>
<!-- /Feature Project -->
<!-- Feature Project -->
<div class="feature-bg" data-project="what-do-you-love" style="display: none; background-color: #f0f0f0;">
<div class="feature-container"> <img src="http://www.bigspaceship.com/wordpress/wp-content/uploads/2011/09/wdyl_pm.jpg" class="masthead" data-project="what-do-you-love" />
<div class="title">
<div class="feature-btn left" data-target="starwars-com"></div>
<a href="http://www.bigspaceship.com/projects/what-do-you-love/" title=" What Do You Love?">
<h2 class="name"> What Do You Love?</h2>
<h3 class="client">Google</h3>
</a>
<div class="feature-btn right" data-target="the-contradictions-project"></div>
</div>
</div>
</div>
<!-- /Feature Project -->
<!-- Feature Project -->
<div class="feature-bg" data-project="the-contradictions-project" style="display: none; background-color: #f7ee77;">
<div class="feature-container"> <img src="http://www.bigspaceship.com/wordpress/wp-content/uploads/2011/11/contradictions_proj_pm2.jpg" class="masthead" data-project="the-contradictions-project" />
<div class="title">
<div class="feature-btn left" data-target="what-do-you-love"></div>
<a href="http://www.bigspaceship.com/projects/the-contradictions-project/" title="The Contradictions Project">
<h2 class="name">The Contradictions Project</h2>
<h3 class="client">Starburst</h3>
</a>
<div class="feature-btn right" data-target="expressive-web"></div>
</div>
</div>
</div>
<!-- /Feature Project -->
<!-- Feature Project -->
<div class="feature-bg" data-project="expressive-web" style="display: none; background-color: #ece2d3;">
<div class="feature-container"> <img src="http://www.bigspaceship.com/wordpress/wp-content/uploads/2011/10/expweb_pm.jpg" class="masthead" data-project="expressive-web" />
<div class="title">
<div class="feature-btn left" data-target="the-contradictions-project"></div>
<a href="http://www.bigspaceship.com/projects/expressive-web/" title="The Expressive Web">
<h2 class="name">The Expressive Web</h2>
<h3 class="client">Adobe</h3>
</a>
<div class="feature-btn right" data-target="activate"></div>
</div>
</div>
</div>
<!-- /Feature Project -->
<!-- Feature Project -->
<div class="feature-bg" data-project="activate" style="display: none; background-color: #c3d0d5;">
<div class="feature-container"> <img src="http://www.bigspaceship.com/wordpress/wp-content/uploads/2011/07/activate_pm.jpg" class="masthead" data-project="activate" />
<div class="title">
<div class="feature-btn left" data-target="expressive-web"></div>
<a href="http://www.bigspaceship.com/projects/activate/" title="Activate">
<h2 class="name">Activate</h2>
<h3 class="client">ACTIVATE Drinks</h3>
</a>
<div class="feature-btn right" data-target="crayola-gift-guide"></div>
</div>
</div>
</div>
<!-- /Feature Project -->
</section>
<!-- end Features -->
<section id="tagline">
<div class = "container" >
<h1>We create <a title="What We Do" href="/what-we-do">connected</a> experiences, products and platforms.</h1>
</div>
</section>
</body>
</html>
扫一扫
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
