首页 / JQUERY / jQuery实现的简单歌词滚动功能示例

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery实现的简单歌词滚动功能示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6934字，纯文字阅读大概需要10分钟。

内容图文

本文实例讲述了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.gxlcms.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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

内容总结

以上是互联网集市为您收集整理的jQuery实现的简单歌词滚动功能示例全部内容，希望文章能够帮你解决jQuery实现的简单歌词滚动功能示例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/333614.html

来源：【匿名】

【上一篇】JQuery搜索框自动补全(模糊匹配)功能实现示例【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jQuery实现的简单歌词滚动功能示例】教程文章相关的互联网学习教程文章

用jQuery实现（全选、反选、全不选功能）

在jQuery选择器的基础下我们实现一个全选，反选，全不选功能！ <script type="text/javascript"> $(function () { //全选 $("#selectAll").click(function () { //attr在HTML推荐非固有（用户自定义）属性是使用 //prop在HTMl元素固有属性的时候使用 $("input[name=‘gx‘]").each(function () {//input[name=‘gx‘]属性过滤选择器 ...

JQuery实现复制到剪贴板功能【代码】

在网页中实现复制到剪贴板功能，有两种方法，第1种方法：使用JavaScript自带的方法，但是这种方法只能在IE下使用。 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好，可贴粘。"); 或者 window.clipboardData.setData("Text","要复制的内容"); alert("已复制好，可贴粘。");第2种方法：使用Jquery.ZeroClipboard组件，这种方法通过内嵌flash来实现的，可以兼容当前流行的各种浏览器。我们今天主要讲解第2种...

通过jquery.cookie.js实现记住用户名、密码登录功能

<!doctype html> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /> <title>无标题文档</title> <scriptsrc="jquery-1.8.3.min.js"></script> <scriptsrc="jquery.cookie.js"></script> <scriptsrc="jquery.base64.js"></script> <scriptlanguage="javascript"type="text/javascript"> functionsetCookie(){ //设置cookie var loginCode = $("#login_co...

利用jquery的contains实现搜索功能【代码】

1 / jquery实现的搜索功能2 $(‘#search_btn‘).on(‘click‘,function(){3var txt=$(‘#inputValue‘).val();4var value=$(‘.layui-colla-content‘);5if($.trim(txt)!=""){6 $(".layui-colla-content").css(‘display‘,‘none‘).filter(":contains(‘"+txt+"‘)").show().css("color","red");7 }else{8 alert(‘111‘);9 } 10 }) 原文：https://www.cnblogs.com/yangguoe/p/9...

jQuery实现HTML表格单元格的合并功能(合并内容相同的行或列)【代码】

/*** desc : 合并指定表格（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格* @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格，此参数应为 #data* @table_colnum : 为需要合并单元格的所在列.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开始算起;"even" 表示偶数列;"odd" 表示奇数列; "3n+1" 表示的列数为1、4、7、......* @table_minrow ? : 可选的,表示要合并列...

点击tr实现选择checkbox功能，点击checkobx的时候阻止冒泡事件， jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

给tr添加点击事件，使用find方法查找tr下的所有层级的元素，children只查找下一层级的元素，所以使用find。find的返回值为jquery对象，在这个项目中不知道为什么使用jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态，所以我就把jquery对象转换为DOM对象，怎么转呢？jquery对象[0]或者get(0)就转换成DOM对象，然后直接.checked返回true或false就可以判断checkbox是否选中了。然后判断状态，改变状态。 $("...

jQuery部分功能使用js进行实现(初探JQ)【代码】

今天使用js写了段jq中的html()方法。我的原则是废话不多说，直接放代码。。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JQuery初探</title> </head> <body><div id="box"><span>1112</span></div><script>var Kodo = function(selector){returnnew Kodo.prototype.init(selector);}Kodo.prototype = {constructor : Kodo,length : 0,splice : [].splice,selector : ‘‘,id:{},init : function(selector...

jQuery实现form表单序列化转换为json对象功能示例【代码】【图】

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>jquery form序列化转换为json对象</title><script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script></script></head><body><form action="" name="post_form" id="post_form">姓名：<input type="name" name="name" value="王"><br/>性别：<input type="radio" name="sex" value="男"checked>男<input type="radio" name="sex" value="女">女<br/>爱好：...

使用jQuery实现返回顶部功能【代码】

很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现返回顶部按钮。首先需要在顶部添加如下html元素：<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>其中a标签指向锚点top，可以在顶部防止一个<a name="top"></a>的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。要想让返回顶部的图片显示在右侧，还需要一些css样式，如下：/*returnTop*/ p#back-to-top{position:fixed;display:none;bot...

使用jQuery练习全选-取消-反选-显示选择内容等功能代码

<span style="font-size:24px;color:#ff0000;">部长练习全选-取消-反选-显示选择内容等功能代码：</span><!doctype html> <html> <head> <meta charset="gb2312"> <title>部长练习全选-取消-反选-显示选择内容等功能</title> <script src="js/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(e) {//实现全选功能$(':input[value=全选]').click(function(){//alert($(this).val()); $('form :checkbox').p...

jquery 实现的一款超简单的图片切换功能

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="./assets/js/jquery.js"></script></head><style></style><script type="text/javascript"> var t; var speed = 2;//图片切换速度 var nowlan=0;//图片开始时间 function changepic() { var imglen = $("div[name=‘pic‘]").find("div").length;//获取DIV 下的滚动条数 ...

jquery 上传图片即时预览功能

jquery 全选功能

1.直接全选（复选框名字要统一）<input type="CHECKBOX" id="cbSelectAll" onclick="$(‘input[name=privilegeIds]‘).attr(‘checked‘,this.checked)"/> <label for="cbSelectAll">全选</label> <ul id="privilegeTree"> <s:iterator value="privilegeList"> <li> <input id="cb_${id }" <s:property value="id in privilegeIds ? ‘checked‘ : ‘‘ "/> value...

jQuery来源学习笔记：扩展的实用功能

// 扩展的实用功能 jQuery.extend({// http://www.w3school.com.cn/jquery/core_noconflict.asp// 释放$的 jQuery 控制权// 很多 JavaScript 库使用 $ 作为函数或变量名，jQuery 也一样。// 在 jQuery 中，$ 仅仅是 jQuery 的别名，因此即使不使用 $ 也能保证全部功能性。// 假如我们须要使用 jQuery 之外的还有一 JavaScript 库，我们能够通过调用 $.noConflict() 向该库返回控制权。// 通过向该方法传递參数 true，我们能够将 $ ...

jQuery实现类似微博定时刷新提示新消息的功能【代码】

1.引入jQuery文件2.添加jquery.refresh.js文件，代码如下： 1/**2 * Created by Silver on 2015/11/27.3*/ 4 5 (function ($) {6 $.refreshData = function (options) {7var defaults = {8 url: ‘/order/ajax_new_count‘,//提交的地址 9 contentData: {}, 10 time: 15, 11 home: false12 }; 13var opts = $.extend({}, defaults, options); 1415 $.refreshDat...

首页 / JQUERY / jQuery实现的简单歌词滚动功能示例

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【jQuery实现的简单歌词滚动功能示例】教程文章相关的互联网学习教程文章

用jQuery实现（全选、反选、全不选功能）

JQuery实现复制到剪贴板功能【代码】

通过jquery.cookie.js实现记住用户名、密码登录功能

利用jquery的contains实现搜索功能【代码】

jQuery实现HTML表格单元格的合并功能(合并内容相同的行或列)【代码】

点击tr实现选择checkbox功能，点击checkobx的时候阻止冒泡事件， jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

jQuery部分功能使用js进行实现(初探JQ)【代码】

jQuery实现form表单序列化转换为json对象功能示例【代码】【图】

使用jQuery实现返回顶部功能【代码】

使用jQuery练习全选-取消-反选-显示选择内容等功能代码

jquery 实现的一款超简单的图片切换功能

jquery 上传图片即时预览功能

jquery 全选功能

jQuery来源学习笔记：扩展的实用功能

jQuery实现类似微博定时刷新提示新消息的功能【代码】

JQUERY - 相关标签

功能 - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程