利用jQuery实现点击文字滚动插件

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

2. 引入JS

<script src="js/jquery-2.0.3.js"></script>
<script src="js/scrollocue.js"></script>

3. HTML代码

  <div id="container">
    <h1>Scrollocue</h1>
    <div class="section meta">
      <p>A simple autocue/teleprompter system.</p>
      <p>Just use the arrows or spacebar to scroll.</p>
      <p>Now, let's walk through some text.</p>
    </div>
    <div class="section title">
      <p>Around the World in 80 Days</p>
      <p>Jules Verne</p>
    </div>
    <div class="section passenger">
      <p>"There is no young lady on board,"</p>
      <p>interrupted the purser.</p>
      <p>"Here is a list of the passengers;</p>
      <p>you may see for yourself."</p>
      <p><span class="name">Passepartout</span> scanned the list,</p>
      <p>but his master's name was not upon it.</p>
      <p>All at once an idea struck him.</p>
    </div>
    <div class="section yokohama">
      <p>"Ah! am I on the Carnatic?"</p>
      <p>"Yes."</p>
      <p>"On the way to Yokohama?"</p>
      <p>"Certainly."</p>
    </div>
    <div class="section wrong">
      <p><span class="name">Passepartout</span> had for an instant feared that he was on the wrong boat;</p>
      <p>but, though he was really on the Carnatic, his master was not there.</p>
    </div>
    <div class="section fogg">
      <p>He fell thunderstruck on a seat.</p>
      <p>He saw it all now.</p>
      <p>He remembered that the time of sailing had been changed,</p>
      <p>that he should have informed his master of that fact,</p>
      <p>and that he had not done so.</p>
      <p>It was his fault, then, that Mr. Fogg and Aouda had missed the steamer.</p>
      <p class="emphasis">Yes, but it was still more the fault of the traitor who,</p>
      <p>in order to separate him from his master,</p>
      <p>and detain the latter at Hong Kong,</p>
      <p class="emphasis">had inveigled him into getting drunk!</p>
      <p>He now saw the detective's trick;</p>
      <p>and at this moment Mr. Fogg was certainly ruined,</p>
      <p>his bet was lost,</p>
      <p>and he himself perhaps arrested and imprisoned!</p>
      <p>At this thought <span class="name">Passepartout</span> tore his hair.</p>
    </div>
    <div class="section meta funky">
     <p>applause</p>
   </div>
 </div>
 <script>
  $('#container').scrollocue();
 </script>
<div style="text-align:center;clear:both">
<p></p>
<p></p>
</div>