使用jQuery怎么实现一个歌词滚动功能

使用jQuery怎么实现一个歌词滚动功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

成县网站建设公司创新互联,成县网站设计制作，有大型网站制作公司丰富经验。已为成县上1000家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的成县做网站的公司定做！

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;
}
h2 {
  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 h2 {
  border-bottom: 1px solid #eee;
  padding: 0 10px;
}
.bcon h2 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

点击确定显示歌词
    
      
        当你老了
        
        
          
            
              当你老了 头发白了 睡意昏沉
            
            
              当你老了 走不动了
            
            
              炉火旁打盹 回忆青春
            
            
              多少人曾爱你 青春欢畅的时辰
            
            
              爱慕你的美丽 假意或真心
            
            
              只有一个人还爱你 虔诚的灵魂
            
            
              爱你苍老的脸上的皱纹
            
            
              当你老了 眼眉低垂 灯火昏黄不定
            
            
              风吹过来 你的消息 这就是我心里的歌
            
            
              多少人曾爱你 青春欢畅的时辰
            
            
              爱慕你的美丽 假意或真心
            
            
              只有一个人还爱你 虔诚的灵魂
            
            
              爱你苍老的脸上的皱纹
            
            
              当你老了 眼眉低垂 灯火昏黄不定
            
            
              风吹过来 你的消息 这就是我心里的歌
            
            
              当我老了 我真希望 这首歌是唱给你的

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完整实例代码：










点击确定显示歌词
    
      
        当你老了
        
        
          
            
              当你老了 头发白了 睡意昏沉
            
            
              当你老了 走不动了
            
            
              炉火旁打盹 回忆青春
            
            
              多少人曾爱你 青春欢畅的时辰
            
            
              爱慕你的美丽 假意或真心
            
            
              只有一个人还爱你 虔诚的灵魂
            
            
              爱你苍老的脸上的皱纹
            
            
              当你老了 眼眉低垂 灯火昏黄不定
            
            
              风吹过来 你的消息 这就是我心里的歌
            
            
              多少人曾爱你 青春欢畅的时辰
            
            
              爱慕你的美丽 假意或真心
            
            
              只有一个人还爱你 虔诚的灵魂
            
            
              爱你苍老的脸上的皱纹
            
            
              当你老了 眼眉低垂 灯火昏黄不定
            
            
              风吹过来 你的消息 这就是我心里的歌
            
            
              当我老了 我真希望 这首歌是唱给你的

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。

本文名称：使用jQuery怎么实现一个歌词滚动功能
转载来源：http://myzitong.com/article/gejpgj.html

使用jQuery怎么实现一个歌词滚动功能

当你老了

当你老了

其他资讯