java实现歌词滚动,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

$(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);

完整实例代码：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

www.jb51.net jQuery歌词滚动

/* 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;

}

点击确定显示歌词确定

当你老了

• 当你老了 头发白了 睡意昏沉

• 当你老了 走不动了

• 炉火旁打盹 回忆青春

• 多少人曾爱你 青春欢畅的时辰

• 爱慕你的美丽 假意或真心

• 只有一个人还爱你 虔诚的灵魂

• 爱你苍老的脸上的皱纹

• 当你老了 眼眉低垂 灯火昏黄不定

• 风吹过来 你的消息 这就是我心里的歌

• 多少人曾爱你 青春欢畅的时辰

• 爱慕你的美丽 假意或真心

• 只有一个人还爱你 虔诚的灵魂

• 爱你苍老的脸上的皱纹

• 当你老了 眼眉低垂 灯火昏黄不定

• 风吹过来 你的消息 这就是我心里的歌

• 当我老了 我真希望 这首歌是唱给你的

$(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的高度

});

});

});

});

效果：

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

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