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

网络编程 2024/11/14 佚名

3 1 2

本文实例讲述了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.jb51.net 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="/UploadFiles/2021-04-02/jquery.min.js">

效果：

感兴趣的朋友可以使用本站在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。

jQuery,歌词滚动

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“jQuery实现的简单歌词滚动功能示例”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月14日

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

jQuery判断自定义属性data-val用法示例

微信小程序发送短信验证码完整实例

评论“jQuery实现的简单歌词滚动功能示例”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接