当前位置：Gxlcms > JavaScript > jQuery实现的简单歌词滚动功能示例

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

时间：2021-07-01 10:21:17 帮助过：4人阅读

本文实例讲述了jQuery实现的简单歌词滚动功能。分享给大家供大家参考，具体如下：

jquery实现歌词滚动

1.css 

  1. /* CSS Document */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   font-size: 12px;
  6. }
  7. body {
  8.   background: none;
  9. }
  10. input,
  11. button,
  12. select,
  13. textarea {
  14.   outline: none;
  15. }
  16. ul,
  17. li,
  18. dl,
  19. ol {
  20.   list-style: none;
  21. }
  22. a {
  23.   color: #666;
  24.   text-decoration: none;
  25. }
  26. h1 {
  27.   font-size: 25px;
  28. }
  29. p {
  30.   font-size: 18px;
  31. }
  32. span {
  33.   font-size: 16px;
  34. }
  35. button {
  36.   font-size: 18px;
  37. }
  38. marquee {
  39.   border: 1px solid #0096BE;
  40.   margin: 30px auto;
  41. }
  42. .box {
  43.   /*width: 980px;*/
  44.   margin: 0 auto;
  45. }
  46. .bcon {
  47.   width: 270px;
  48.   border: 1px solid #eee;
  49.   margin: 30px auto;
  50. }
  51. .bcon h1 {
  52.   border-bottom: 1px solid #eee;
  53.   padding: 0 10px;
  54. }
  55. .bcon h1 b {
  56.   font: bold 14px/40px '宋体';
  57.   border-top: 2px solid #3492D1;
  58.   padding: 0 8px;
  59.   margin-top: -1px;
  60.   display: inline-block;
  61. }
  62. .list_lh {
  63.   height: 400px;
  64.   overflow: hidden;
  65. }
  66. .list_lh li {
  67.   padding: 10px;
  68.   overflow: hidden;
  69. }
  70. .list_lh li.lieven {
  71.   background: #F0F2F3;
  72. }
  73. .list_lh li p {
  74.   line-height: 24px;
  75. }
  76. .list_lh li p a {
  77.   float: left;
  78. }
  79. .list_lh li p em {
  80.   width: 80px;
  81.   font: normal 12px/24px Arial;
  82.   color: #FF3300;
  83.   float: right;
  84.   display: inline-block;
  85. }
  86. .list_lh li p span {
  87.   color: #999;
  88.   float: right;
  89. }
  90. .list_lh li p a.btn_lh {
  91.   background: #28BD19;
  92.   height: 17px;
  93.   line-height: 17px;
  94.   color: #fff;
  95.   padding: 0 5px;
  96.   margin-top: 4px;
  97.   display: inline-block;
  98.   float: right;
  99. }
  100. .btn_lh:hover {
  101.   color: #fff;
  102.   text-decoration: none;
  103. }
  104. .btm p {
  105.   font: normal 12px/24px 'Microsoft YaHei';
  106.   text-align: center;
  107. }

2.html

  1. <span>点击确定显示歌词</span><button>确定</button>
  2.     <div class="box" style="display: none;">
  3.       <div class="bcon">
  4.         <h1><b>当你老了</b></h1>
  5.         <!-- 代码开始 -->
  6.         <div class="list_lh">
  7.           <ul>
  8.             <li>
  9.               <p>当你老了 头发白了 睡意昏沉</p>
  10.             </li>
  11.             <li>
  12.               <p>当你老了 走不动了</p>
  13.             </li>
  14.             <li>
  15.               <p>炉火旁打盹 回忆青春</p>
  16.             </li>
  17.             <li>
  18.               <p>多少人曾爱你 青春欢畅的时辰</p>
  19.             </li>
  20.             <li>
  21.               <p>爱慕你的美丽 假意或真心</p>
  22.             </li>
  23.             <li>
  24.               <p>只有一个人还爱你 虔诚的灵魂</p>
  25.             </li>
  26.             <li>
  27.               <p>爱你苍老的脸上的皱纹</p>
  28.             </li>
  29.             <li>
  30.               <p>当你老了 眼眉低垂 灯火昏黄不定</p>
  31.             </li>
  32.             <li>
  33.               <p>风吹过来 你的消息 这就是我心里的歌</p>
  34.             </li>
  35.             <li>
  36.               <p>多少人曾爱你 青春欢畅的时辰</p>
  37.             </li>
  38.             <li>
  39.               <p>爱慕你的美丽 假意或真心</p>
  40.             </li>
  41.             <li>
  42.               <p>只有一个人还爱你 虔诚的灵魂</p>
  43.             </li>
  44.             <li>
  45.               <p>爱你苍老的脸上的皱纹</p>
  46.             </li>
  47.             <li>
  48.               <p>当你老了 眼眉低垂 灯火昏黄不定</p>
  49.             </li>
  50.             <li>
  51.               <p>风吹过来 你的消息 这就是我心里的歌</p>
  52.             </li>
  53.             <li>
  54.               <p>当我老了 我真希望 这首歌是唱给你的</p>
  55.             </li>
  56.           </ul>
  57.         </div>

3.js

  1. $(document).ready(function() {
  2.       $('.list_lh li:even').addClass('lieven');
  3.     });
  4.     $(document).ready(function() {
  5.       $("button").click(function() {
  6.         $("span").hide("slow", function() {
  7.           $(".box").css("display", "block");
  8.           $("div.list_lh").myScroll({
  9.             speed: 60, //数值越大，速度越慢
  10.             rowHeight: 44 //li的高度
  11.           });
  12.         });
  13.       });
  14.     });

引入scroll.js

  1. // JavaScript Document
  2. (function($){
  3.   $.fn.myScroll = function(options){
  4.   //默认配置
  5.   var defaults = {
  6.     speed:40, //滚动速度,值越大速度越慢
  7.     rowHeight:24 //每行的高度
  8.   };
  9.   var opts = $.extend({}, defaults, options),intId = [];
  10.   var x = $("ul").find("li").length;//找到li的个数
  11.   var z=0;
  12.   function marquee(obj, step){
  13.     obj.find("ul").animate({
  14.       marginTop: '-=1'
  15.     },0,function(){
  16.         z = z + 1;
  17.         var s = Math.abs(parseInt($(this).css("margin-top")));
  18.         if(s >= step&&z<x){//z<x是为了让循环只走一遍，如果去掉就是首尾不间断滚动
  19.           $(this).find("li").slice(0, 1).appendTo($(this));
  20.           $(this).css("margin-top", 0);
  21.         }
  22.       });
  23.     }
  24.     this.each(function(i){
  25.       var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
  26.       intId[i] = setInterval(function(){
  27.         if(_this.find("ul").height()<=_this.height()){
  28.           clearInterval(intId[i]);
  29.         }else{
  30.           marquee(_this, sh);
  31.         }
  32.       }, speed);
  33.       _this.hover(function(){
  34.         clearInterval(intId[i]);
  35.       },function(){
  36.         intId[i] = setInterval(function(){
  37.           if(_this.find("ul").height()<=_this.height()){
  38.             clearInterval(intId[i]);
  39.           }else{
  40.             marquee(_this, sh);
  41.           }
  42.         }, speed);
  43.       });
  44.     });
  45.   }
  46. })(jQuery);

完整实例代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>www.gxlcms.com jQuery歌词滚动</title>
  7. <style>
  8. /* CSS Document */
  9. * {
  10.   margin: 0;
  11.   padding: 0;
  12.   font-size: 12px;
  13. }
  14. body {
  15.   background: none;
  16. }
  17. input,
  18. button,
  19. select,
  20. textarea {
  21.   outline: none;
  22. }
  23. ul,
  24. li,
  25. dl,
  26. ol {
  27.   list-style: none;
  28. }
  29. a {
  30.   color: #666;
  31.   text-decoration: none;
  32. }
  33. h1 {
  34.   font-size: 25px;
  35. }
  36. p {
  37.   font-size: 18px;
  38. }
  39. span {
  40.   font-size: 16px;
  41. }
  42. button {
  43.   font-size: 18px;
  44. }
  45. marquee {
  46.   border: 1px solid #0096BE;
  47.   margin: 30px auto;
  48. }
  49. .box {
  50.   /*width: 980px;*/
  51.   margin: 0 auto;
  52. }
  53. .bcon {
  54.   width: 270px;
  55.   border: 1px solid #eee;
  56.   margin: 30px auto;
  57. }
  58. .bcon h1 {
  59.   border-bottom: 1px solid #eee;
  60.   padding: 0 10px;
  61. }
  62. .bcon h1 b {
  63.   font: bold 14px/40px '宋体';
  64.   border-top: 2px solid #3492D1;
  65.   padding: 0 8px;
  66.   margin-top: -1px;
  67.   display: inline-block;
  68. }
  69. .list_lh {
  70.   height: 400px;
  71.   overflow: hidden;
  72. }
  73. .list_lh li {
  74.   padding: 10px;
  75.   overflow: hidden;
  76. }
  77. .list_lh li.lieven {
  78.   background: #F0F2F3;
  79. }
  80. .list_lh li p {
  81.   line-height: 24px;
  82. }
  83. .list_lh li p a {
  84.   float: left;
  85. }
  86. .list_lh li p em {
  87.   width: 80px;
  88.   font: normal 12px/24px Arial;
  89.   color: #FF3300;
  90.   float: right;
  91.   display: inline-block;
  92. }
  93. .list_lh li p span {
  94.   color: #999;
  95.   float: right;
  96. }
  97. .list_lh li p a.btn_lh {
  98.   background: #28BD19;
  99.   height: 17px;
  100.   line-height: 17px;
  101.   color: #fff;
  102.   padding: 0 5px;
  103.   margin-top: 4px;
  104.   display: inline-block;
  105.   float: right;
  106. }
  107. .btn_lh:hover {
  108.   color: #fff;
  109.   text-decoration: none;
  110. }
  111. .btm p {
  112.   font: normal 12px/24px 'Microsoft YaHei';
  113.   text-align: center;
  114. }
  115. </style>
  116. </head>
  117. <body>
  118. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  119. <script src="scroll.js"></script>
  120. <span>点击确定显示歌词</span><button>确定</button>
  121.     <div class="box" style="display: none;">
  122.       <div class="bcon">
  123.         <h1><b>当你老了</b></h1>
  124.         <!-- 代码开始 -->
  125.         <div class="list_lh">
  126.           <ul>
  127.             <li>
  128.               <p>当你老了 头发白了 睡意昏沉</p>
  129.             </li>
  130.             <li>
  131.               <p>当你老了 走不动了</p>
  132.             </li>
  133.             <li>
  134.               <p>炉火旁打盹 回忆青春</p>
  135.             </li>
  136.             <li>
  137.               <p>多少人曾爱你 青春欢畅的时辰</p>
  138.             </li>
  139.             <li>
  140.               <p>爱慕你的美丽 假意或真心</p>
  141.             </li>
  142.             <li>
  143.               <p>只有一个人还爱你 虔诚的灵魂</p>
  144.             </li>
  145.             <li>
  146.               <p>爱你苍老的脸上的皱纹</p>
  147.             </li>
  148.             <li>
  149.               <p>当你老了 眼眉低垂 灯火昏黄不定</p>
  150.             </li>
  151.             <li>
  152.               <p>风吹过来 你的消息 这就是我心里的歌</p>
  153.             </li>
  154.             <li>
  155.               <p>多少人曾爱你 青春欢畅的时辰</p>
  156.             </li>
  157.             <li>
  158.               <p>爱慕你的美丽 假意或真心</p>
  159.             </li>
  160.             <li>
  161.               <p>只有一个人还爱你 虔诚的灵魂</p>
  162.             </li>
  163.             <li>
  164.               <p>爱你苍老的脸上的皱纹</p>
  165.             </li>
  166.             <li>
  167.               <p>当你老了 眼眉低垂 灯火昏黄不定</p>
  168.             </li>
  169.             <li>
  170.               <p>风吹过来 你的消息 这就是我心里的歌</p>
  171.             </li>
  172.             <li>
  173.               <p>当我老了 我真希望 这首歌是唱给你的</p>
  174.             </li>
  175.           </ul>
  176.         </div>
  177. <script>
  178. $(document).ready(function() {
  179.       $('.list_lh li:even').addClass('lieven');
  180.     });
  181.     $(document).ready(function() {
  182.       $("button").click(function() {
  183.         $("span").hide("slow", function() {
  184.           $(".box").css("display", "block");
  185.           $("div.list_lh").myScroll({
  186.             speed: 60, //数值越大，速度越慢
  187.             rowHeight: 44 //li的高度
  188.           });
  189.         });
  190.       });
  191.     });
  192. </script>
  193. </body>
  194. </html>

效果：

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

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

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！