以下是 电影结尾插件jQuery End Credits js代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电影结尾插件jQuery End Credits</title>
<link rel="stylesheet" href="static/bootstrap.min.css">
<link rel="stylesheet" href="static/endcredits.css">
<link href="static/jumbotron-narrow.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>jQuery End Credits</h1>
<p>Don't you think your site deserves an ending like in the movies? Show all your staff, your thanks, your logos and partners with this component!</p>
<p>
<a class="btn btn-lg btn-success" href="#creditos" name="creditos">Open Credits</a>
</p>
</div>
<div class="row">
<div class="col-lg-12">
<blockquote>
<h4>End Credits</h4>
<p>Closing credits or end credits are added at the end of a motion picture, television program, or video game to list the cast and crew involved in the production. They usually appear as a list of names in small type, which either flip very quickly from page to page, or move smoothly across the background or a black screen. Credits may crawl either right-to-left (common in U.K. and some Latin American television programs) or bottom-to-top (common in films and U.S. television). The term credit roll comes from the early production days when the names were literally printed on a roll of paper and wound past the camera lens. Sometimes, post-credits scenes or bloopers are added to the end of films along with the closing credits.</p>
</blockquote>
</div>
</div>
</div>
<!-- /container -->
<!-- Start of Credits -->
<div id="titles">
<div id="credits">
<div id="the-end">PetPaw.co</div>
<br />
<h1>Cast</h1>
<dl>
<dt>Founder</dt>
<dd>Daniel Malkafly</dd>
<dt>Creative</dt>
<dd>Fabio Munhoz</dd>
<dt>Operations</dt>
<dd>Gabriela Cardoso</dd>
<dt>Business</dt>
<dd>Isabela Cardoso</dd>
<dt>Sales</dt>
<dd>Alex Pinto</dd>
<dt>Social Media</dt>
<dd>Felippe Linhares</dd>
<dt>Tecnical Suport</dt>
<dd>Danilo Costa</dd>
<dt>Developer #1</dt>
<dd>Rafael Albuquerque</dd>
<dt>Developer #2</dt>
<dd>Adrian Borsati</dd>
<dt>Data Base Analysis</dt>
<dd>Leandro Miyabayashi</dd>
<dt>Designer #1</dt>
<dd>Lucas Isvairosvikh</dd>
<dt>Map markers</dt>
<dd>Loraine Vilches</dd>
<dt>Infrastructure</dt>
<dd>Vinicius Moreira</dd>
<dt>Turkey partner</dt>
<dd>Ozgür Dinçer</dd>
</dl>
<h1>Moderators</h1>
<dl>
<dt>Lead Moderator</dt>
<dd>Paloma Perachini</dd>
<dt>Moderator analysis</dt>
<dd>Gabriela Cardoso</dd>
<dt>Moderator #1</dt>
<dd>Gisele Souza</dd>
<dt>Moderator #2</dt>
<dd>Frank Alma</dd>
<dt>Moderator #3</dt>
<dd>Joe Magnata</dd>
</dl>
<h1>Special Thanks</h1>
<p>Cachorro Verde, Cantinho Animal, Diego Carneiro, Maitê Lima, Seiti Kaziami, Cecília Amodeo, FotoPet, Bruno Kenj, Juliana GM, Silvia Valadares, Lucas Romão, and more...</p>
<div class="clearfix"></div>
<h1>Special Thanks</h1>
<p>Patricia Tajima, Eduardo Lobo, Thiago Cavaleiro, Rafael Albuquerque, Rafael D'andrea, Seiti Kaziami, Domenica Mendes, André Vasconcelos,
Rogério Rodrigues, Andrea Borsati, Erico Albino (Babuu!), Júlio Carneiro
</p>
<div class="clearfix"></div>
<h1>Developed using</h1>
<p>
<img src="static/microsoft.png">
<img src="static/windows-azure.png">
<img src="static/microsoft-bizspark.png">
<img src="static/node.png">
<img src="static/jquery.png">
<img src="static/html5.png">
<img src="static/css3.png">
</p>
<h1>Powered by</h1>
<p>
<img src="static/epic-hail-interactive.png">
</p>
<h1>Say Hail!</h1>
<div class="clearfix"></div>
<div class="fineprint">All trademarks are the property of the trademark owners.
<br>All premier division football players are the property of premier
<br>division football team owners.</div>
</div>
<div class="clearfix"></div>
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script src="static/endcredits.js"></script>
</body>
</html>JS代码(endcredits.js):
/* * jQuery endcredits Plugin * * Copyright (c) 2014 Daniel Malkafly <malk@epichail.com> * Dual licensed under the MIT or GPL Version 2 licenses or later. * * This program is distributed in the hope that it will be useful,* but WITHOUT ANY WARRANTY;
without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. */
$(document).ready(function (){
$('a[name=creditos]').click(function (e){
e.preventDefault();
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#titles').css({
'width':maskWidth,'height':maskHeight}
);
$('#titles').fadeIn(1000);
$('#titles').fadeTo("slow");
$('#titles').fadeIn();
$('#credits').css("left",(($('#credits').parent().width() - $('#credits').outerWidth()) / 2) + "px");
$('#credits').css("bottom","-" + (maskHeight * 2) + "px");
$('#credits').show('slow');
$('#credits').animate({
bottom:maskHeight + "px"}
,{
duration:30000,complete:function (){
$('#titles').fadeOut();
$('.window').fadeOut();
$('#credits').css("bottom","-" + (maskHeight * 2) + "px");
}
,step:function (n,t){
var pos = $(this).position();
console.log('X:' + pos.left.toFixed(2) + ' Y:' + pos.top.toFixed(2));
}
}
);
}
);
$('.window .close').click(function (e){
e.preventDefault();
$('#credits').css("bottom","-" + ($(document).height() * 2) + "px");
$('#titles').hide();
$('.window').hide();
}
);
$('#titles').click(function (){
$(this).hide();
$('#credits').css("bottom","-" + ($(document).height() * 2) + "px");
$('.window').hide();
}
);
}
);
CSS代码(endcredits.css):
#titles{overflow:hidden;background-color:#000;font-family:Arial,Helvetica,sans-serif;display:none;position:absolute;z-index:99999;left:0;top:0;}
#titles div#the-end{font-size:60px;font-weight:bold;color:#ffffff;text-shadow:0 0 12px #ffffff;width:100%;text-align:center;}
#credits{color:#ffffff;position:absolute;}
#credits h1{color:#888888;width:100%;height:100%;margin:50px 0 0 50px;text-align:center;font-size:16px;font-family:monospace;text-transform:uppercase;letter-spacing:10px;}
#credits dl{margin:0px auto;}
#credits dt{float:left;width:260px;margin:0;padding:13px 0 0 0;text-align:right;font-family:"Arial Narrow",sans-serif;font-size:20px;clear:left;}
#credits dd{width:100%;margin:0 0 0 280px;padding:13px 0 0 0;font-family:"Arial Black",sans-serif;font-weight:bold;font-size:20px;}
#credits p{width:508px;margin:10px 0px 10px 60px;text-align:center;font-family:Arial,sans-serif;font-size:20px;}
#credits .fineprint{color:#888888;width:100%;margin:80px 0 0 50px;text-align:center;font-size:10px;font-family:sans-serif;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{display:inline-block;}
/* start commented backslash hack \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* close commented backslash hack */
CSS代码(jumbotron-narrow.css):
/* Space out content a bit */
body{padding-top:20px;padding-bottom:20px;}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,.marketing,.footer{padding-left:15px;padding-right:15px;}
/* Custom page header */
.header{border-bottom:1px solid #e5e5e5;}
/* Make the masthead heading the same height as the navigation */
.header h3{margin-top:0;margin-bottom:0;line-height:40px;padding-bottom:19px;}
/* Custom page footer */
.footer{padding-top:19px;color:#777;border-top:1px solid #e5e5e5;}
/* Customize container */
@media (min-width:768px){.container{max-width:730px;}
}
.container-narrow > hr{margin:30px 0;}
/* Main marketing message and sign up button */
.jumbotron{text-align:center;border-bottom:1px solid #e5e5e5;}
.jumbotron .btn{font-size:21px;padding:14px 24px;}
/* Supporting marketing content */
.marketing{margin:40px 0;}
.marketing p + h4{margin-top:28px;}
/* Responsive:Portrait tablets and up */
@media screen and (min-width:768px){/* Remove the padding we set earlier */
.header,.marketing,.footer{padding-left:0;padding-right:0;}
/* Space out the masthead */
.header{margin-bottom:30px;}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron{border-bottom:0;}
}
分享到QQ
分享到微博
微信扫一扫
