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

这篇文章主要介绍了jQuery实现的简单歌词滚动功能,结合实例形式分析了基于jQuery插件scroll.js实现滚动功能相关操作技巧,涉及jQuery结合时间函数动态操作页面元素相关实现方法,需要的朋友可以参考下

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

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

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

完整实例代码：

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