jQuery實現的簡單歌詞滾動功能示例

2019-11-19 12:19:05

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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>

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, //數值越大，速度越慢            rowHeight: 44 //li的高度          });        });      });    });

引入scroll.js

// JavaScript Document(function($){  $.fn.myScroll = function(options){  //默認配置  var defaults = {    speed:40, //滾動速度,值越大速度越慢    rowHeight:24 //每行的高度  };  var opts = $.extend({}, defaults, options),intId = [];  var x = $("ul").find("li").length;//找到li的個數  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是為了讓循環只走一遍，如果去掉就是首尾不間斷滾動          $(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);

完整實例代碼：

<!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>m.survivalescaperooms.com jQuery歌詞滾動</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;}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;}</style></head><body><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="scroll.js"></script><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><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, //數值越大，速度越慢            rowHeight: 44 //li的高度          });        });      });    });</script></body></html>

效果：