首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网络编程 / JavaScript 阅读数： 255
收藏 0 赞 0 分享

本文实例讲述了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="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>

效果：

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

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

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

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结，需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里，我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明，这个主题很难，在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript （用setTimeout而非setInterval）

javascript （用setTimeout而非setInterval）如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于，如果明确设置了o中flag的值（非null/undefined/0""/等值），自然test就会取跟o.flag一样的值；如果没有设置，test就会默认为false，而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器，内容很多，方法实用，推荐

最近用javascript写了一个简单的计算器，自己测试感觉还好,代码都给了注释，非常不错，推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器，里面涉及到一些方法还是很实用的哦，新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素，remove用来删除元素，或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域，没有private修饰符，但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量（除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求，或没有我们需要的功能，那么我们就可以自己扩展下，个性化js
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22