利用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>