首页
所有分类
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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jquery实现tab选项卡切换效果（悬停、下方横线动画位移）
May 05 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jquery实现弹窗（系统提示框）效果
Dec 10 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jquery插件实现图片悬浮
Apr 16 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) 德生(17) 电子管(5) TECSUN(1) 矿石收音机(1) 海燕B411(1) 接收机(2) 修复(2) 车机(1) DSP(2)
You might like
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
JavaScript驾驭网页－获取网页元素
2016/03/24 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
Vue.js项目实战之多语种网站的功能实现（租车）
2019/08/07 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
Python3基础之基本数据类型概述
2014/08/13 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
python中数字是否为可变类型
2020/07/08 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
phpquery中文手册
2021/03/18 PHP
Dune London官网：英国著名奢华鞋履品牌
2017/11/30 全球购物
世界上最大的家庭自动化公司：Smarthome
2017/12/20 全球购物
微软中国官方旗舰店：销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
校园报刊亭创业计划书
2014/01/02 职场文书
给国外客户的邀请函
2014/01/30 职场文书
结婚喜宴主持词
2014/03/14 职场文书
校园活动策划方案
2014/06/13 职场文书
顶岗实习协议书
2015/01/29 职场文书
同事打架检讨书
2015/05/06 职场文书