使用jQuery怎么實(shí)現(xiàn)一個(gè)歌詞滾動功能

使用jQuery怎么實(shí)現(xiàn)一個(gè)歌詞滾動功能？很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

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;
}
h2 {
  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 h2 {
  border-bottom: 1px solid #eee;
  padding: 0 10px;
}
.bcon h2 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>點(diǎn)擊確定顯示歌詞</span><button>確定</button>
    <div class="box" >
      <div class="bcon">
        <h2><b>當(dāng)你老了</b></h2>
        <!-- 代碼開始 -->
        <div class="list_lh">
          <ul>
            <li>
              <p>當(dāng)你老了 頭發(fā)白了 睡意昏沉</p>
            </li>
            <li>
              <p>當(dāng)你老了 走不動了</p>
            </li>
            <li>
              <p>爐火旁打盹 回憶青春</p>
            </li>
            <li>
              <p>多少人曾愛你 青春歡暢的時(shí)辰</p>
            </li>
            <li>
              <p>愛慕你的美麗 假意或真心</p>
            </li>
            <li>
              <p>只有一個(gè)人還愛你 虔誠的靈魂</p>
            </li>
            <li>
              <p>愛你蒼老的臉上的皺紋</p>
            </li>
            <li>
              <p>當(dāng)你老了 眼眉低垂 燈火昏黃不定</p>
            </li>
            <li>
              <p>風(fēng)吹過來 你的消息 這就是我心里的歌</p>
            </li>
            <li>
              <p>多少人曾愛你 青春歡暢的時(shí)辰</p>
            </li>
            <li>
              <p>愛慕你的美麗 假意或真心</p>
            </li>
            <li>
              <p>只有一個(gè)人還愛你 虔誠的靈魂</p>
            </li>
            <li>
              <p>愛你蒼老的臉上的皺紋</p>
            </li>
            <li>
              <p>當(dāng)你老了 眼眉低垂 燈火昏黃不定</p>
            </li>
            <li>
              <p>風(fēng)吹過來 你的消息 這就是我心里的歌</p>
            </li>
            <li>
              <p>當(dāng)我老了 我真希望 這首歌是唱給你的</p>
            </li>
          </ul>
        </div>

3.js

$(document).ready(function() {
      $('.list_lh li:even').addClass('lieven');
    });
    $(document).ready(function() {
      $("button").click(function() {
        $("span").hide("slow", function() {
          $(".box").css("display", "block");
          $("div.list_lh").myScroll({
            speed: 60, //數(shù)值越大，速度越慢
            rowHeight: 44 //li的高度
          });
        });
      });
    });

引入scroll.js

// JavaScript Document
(function($){
  $.fn.myScroll = function(options){
  //默認(rèn)配置
  var defaults = {
    speed:40, //滾動速度,值越大速度越慢
    rowHeight:24 //每行的高度
  };
  var opts = $.extend({}, defaults, options),intId = [];
  var x = $("ul").find("li").length;//找到li的個(gè)數(shù)
  var z=0;
  function marquee(obj, step){
    obj.find("ul").animate({
      marginTop: '-=1'
    },0,function(){
        z = z + 1;
        var s = Math.abs(parseInt($(this).css("margin-top")));
        if(s >= step&&z<x){//z<x是為了讓循環(huán)只走一遍，如果去掉就是首尾不間斷滾動
          $(this).find("li").slice(0, 1).appendTo($(this));
          $(this).css("margin-top", 0);
        }
      });
    }
    this.each(function(i){
      var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
      intId[i] = setInterval(function(){
        if(_this.find("ul").height()<=_this.height()){
          clearInterval(intId[i]);
        }else{
          marquee(_this, sh);
        }
      }, speed);
      _this.hover(function(){
        clearInterval(intId[i]);
      },function(){
        intId[i] = setInterval(function(){
          if(_this.find("ul").height()<=_this.height()){
            clearInterval(intId[i]);
          }else{
            marquee(_this, sh);
          }
        }, speed);
      });
    });
  }
})(jQuery);

完整實(shí)例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
/* 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;
}
h2 {
  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 h2 {
  border-bottom: 1px solid #eee;
  padding: 0 10px;
}
.bcon h2 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;
}
</style>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="scroll.js"></script>
<span>點(diǎn)擊確定顯示歌詞</span><button>確定</button>
    <div class="box" >
      <div class="bcon">
        <h2><b>當(dāng)你老了</b></h2>
        <!-- 代碼開始 -->
        <div class="list_lh">
          <ul>
            <li>
              <p>當(dāng)你老了 頭發(fā)白了 睡意昏沉</p>
            </li>
            <li>
              <p>當(dāng)你老了 走不動了</p>
            </li>
            <li>
              <p>爐火旁打盹 回憶青春</p>
            </li>
            <li>
              <p>多少人曾愛你 青春歡暢的時(shí)辰</p>
            </li>
            <li>
              <p>愛慕你的美麗 假意或真心</p>
            </li>
            <li>
              <p>只有一個(gè)人還愛你 虔誠的靈魂</p>
            </li>
            <li>
              <p>愛你蒼老的臉上的皺紋</p>
            </li>
            <li>
              <p>當(dāng)你老了 眼眉低垂 燈火昏黃不定</p>
            </li>
            <li>
              <p>風(fēng)吹過來 你的消息 這就是我心里的歌</p>
            </li>
            <li>
              <p>多少人曾愛你 青春歡暢的時(shí)辰</p>
            </li>
            <li>
              <p>愛慕你的美麗 假意或真心</p>
            </li>
            <li>
              <p>只有一個(gè)人還愛你 虔誠的靈魂</p>
            </li>
            <li>
              <p>愛你蒼老的臉上的皺紋</p>
            </li>
            <li>
              <p>當(dāng)你老了 眼眉低垂 燈火昏黃不定</p>
            </li>
            <li>
              <p>風(fēng)吹過來 你的消息 這就是我心里的歌</p>
            </li>
            <li>
              <p>當(dāng)我老了 我真希望 這首歌是唱給你的</p>
            </li>
          </ul>
        </div>
<script>
$(document).ready(function() {
      $('.list_lh li:even').addClass('lieven');
    });
    $(document).ready(function() {
      $("button").click(function() {
        $("span").hide("slow", function() {
          $(".box").css("display", "block");
          $("div.list_lh").myScroll({
            speed: 60, //數(shù)值越大，速度越慢
            rowHeight: 44 //li的高度
          });
        });
      });
    });
</script>
</body>
</html>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。