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>www.VeVB.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>

效果：