特效描述:利用jQuery实现 点击文字滚动。利用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>