本文實例講述了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>
新聞熱點
疑難解答
圖片精選