本文實例講述了jQuery實現的簡單歌詞滾動功能。分享給大家供大家參考，具體如下：

jquery實現歌詞滾動

1.css 

/* CSS Document */* {  margin: 0;  padding: 0;  font-size: 12px;}body {  background: none;}input,button,select,textarea {  outline: none;}ul,li,dl,ol {  list-style: none;}a {  color: #666;  text-decoration: none;}h1 {  font-size: 25px;}p {  font-size: 18px;}span {  font-size: 16px;}button {  font-size: 18px;}marquee {  border: 1px solid #0096BE;  margin: 30px auto;}.box {  /*width: 980px;*/  margin: 0 auto;}.bcon {  width: 270px;  border: 1px solid #eee;  margin: 30px auto;}.bcon h1 {  border-bottom: 1px solid #eee;  padding: 0 10px;}.bcon h1 b {  font: bold 14px/40px '宋體';  border-top: 2px solid #3492D1;  padding: 0 8px;  margin-top: -1px;  display: inline-block;}.list_lh {  height: 400px;  overflow: hidden;}.list_lh li {  padding: 10px;  overflow: hidden;}.list_lh li.lieven {  background: #F0F2F3;}.list_lh li p {  line-height: 24px;}.list_lh li p a {  float: left;}.list_lh li p em {  width: 80px;  font: normal 12px/24px Arial;  color: #FF3300;  float: right;  display: inline-block;}.list_lh li p span {  color: #999;  float: right;}.list_lh li p a.btn_lh {  background: #28BD19;  height: 17px;  line-height: 17px;  color: #fff;  padding: 0 5px;  margin-top: 4px;  display: inline-block;  float: right;}.btn_lh:hover {  color: #fff;  text-decoration: none;}.btm p {  font: normal 12px/24px 'Microsoft YaHei';  text-align: center;}

2.html

<span>點擊確定顯示歌詞</span><button>確定</button>    <div class="box" style="display: none;">      <div class="bcon">        <h1><b>當你老了</b></h1>        <!-- 代碼開始 -->        <div class="list_lh">          <ul>            <li>              <p>當你老了 頭發白了 睡意昏沉</p>            </li>            <li>              <p>當你老了 走不動了</p>            </li>            <li>              <p>爐火旁打盹 回憶青春</p>            </li>            <li>              <p>多少人曾愛你 青春歡暢的時辰</p>            </li>            <li>              <p>愛慕你的美麗 假意或真心</p>            </li>            <li>              <p>只有一個人還愛你 虔誠的靈魂</p>            </li>            <li>              <p>愛你蒼老的臉上的皺紋</p>            </li>            <li>              <p>當你老了 眼眉低垂 燈火昏黃不定</p>            </li>            <li>              <p>風吹過來 你的消息 這就是我心里的歌</p>            </li>            <li>              <p>多少人曾愛你 青春歡暢的時辰</p>            </li>            <li>              <p>愛慕你的美麗 假意或真心</p>            </li>            <li>              <p>只有一個人還愛你 虔誠的靈魂</p>            </li>            <li>              <p>愛你蒼老的臉上的皺紋</p>            </li>            <li>              <p>當你老了 眼眉低垂 燈火昏黃不定</p>            </li>            <li>              <p>風吹過來 你的消息 這就是我心里的歌</p>            </li>            <li>              <p>當我老了 我真希望 這首歌是唱給你的</p>            </li>          </ul>        </div>