首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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

Posted in jQuery onJanuary 07, 2019

本文实例讲述了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>3water.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>

效果：

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

感兴趣的朋友可以使用本站在线HTML/CSS/JavaScript代码运行工具：http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

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

- Author -

The_road_of_ordinary

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jquery实现图片上传前本地预览
Apr 28 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 #jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 #jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 #jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 #jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 #jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 #jQuery
虚拟键盘(1) RustDesk(1) xhunter1.sys(1) 蓝牙耳机(1) 蓝牙(1) 鸿蒙(2) HarmonyOS(1) Debian(1) 鸿蒙3.0(1) 华为(1)
You might like
哪吒敖丙传：新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
ipad上运行python的方法步骤
2019/10/12 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
Spartoo瑞典：鞋子、包包和衣服
2018/09/15 全球购物
物流毕业生个人的自我评价
2014/02/13 职场文书
文案策划求职信
2014/03/18 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
企业管理标语
2014/06/10 职场文书
效能风暴心得体会
2014/09/04 职场文书
催款函范本大全
2015/06/24 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript