特效描述:利用jQuery实现 电影结尾 滚动字幕。利用jQuery实现电影结尾滚动字幕代码
代码结构
1. 引入CSS
<link rel="stylesheet" href="static/bootstrap.min.css"> <link rel="stylesheet" href="static/endcredits.css"> <link href="static/jumbotron-narrow.css" rel="stylesheet">
2. 引入JS
<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> <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="static/endcredits.js"></script>
3. HTML代码
<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> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div>