jQuery实现的简单歌词滚动功能示例

本文实例讲述了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>