本文实例讲述了jQuery实现的简单歌词滚动功能。分享给大家供大家参考，具体如下：
jquery实现歌词滚动
1.css
* {
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 {
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.jb51.net jQuery歌词滚动
* {
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 {
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;
}
点击确定显示歌词
当你老了
-
当你老了 头发白了 睡意昏沉
-
当你老了 走不动了
-
炉火旁打盹 回忆青春
-
多少人曾爱你 青春欢畅的时辰
-
爱慕你的美丽 假意或真心
-
只有一个人还爱你 虔诚的灵魂
-
爱你苍老的脸上的皱纹
-
当你老了 眼眉低垂 灯火昏黄不定
-
风吹过来 你的消息 这就是我心里的歌
-
多少人曾爱你 青春欢畅的时辰
-
爱慕你的美丽 假意或真心
-
只有一个人还爱你 虔诚的灵魂
-
爱你苍老的脸上的皱纹
-
当你老了 眼眉低垂 灯火昏黄不定
-
风吹过来 你的消息 这就是我心里的歌
-
当我老了 我真希望 这首歌是唱给你的
效果：
感兴趣的朋友可以使用本站在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
