使用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;
}
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
<span>点击确定显示歌词</span><button>确定</button> <div class="box" > <div class="bcon"> <h2><b>当你老了</b></h2> <!-- 代码开始 --> <div class="list_lh"> <ul> <li> <p>当你老了 头发白了 睡意昏沉</p> </li> <li> <p>当你老了 走不动了</p> </li> <li> <p>炉火旁打盹 回忆青春</p> </li> <li> <p>多少人曾爱你 青春欢畅的时辰</p> </li> <li> <p>爱慕你的美丽 假意或真心</p> </li> <li> <p>只有一个人还爱你 虔诚的灵魂</p> </li> <li> <p>爱你苍老的脸上的皱纹</p> </li> <li> <p>当你老了 眼眉低垂 灯火昏黄不定</p> </li> <li> <p>风吹过来 你的消息 这就是我心里的歌</p> </li> <li> <p>多少人曾爱你 青春欢畅的时辰</p> </li> <li> <p>爱慕你的美丽 假意或真心</p> </li> <li> <p>只有一个人还爱你 虔诚的灵魂</p> </li> <li> <p>爱你苍老的脸上的皱纹</p> </li> <li> <p>当你老了 眼眉低垂 灯火昏黄不定</p> </li> <li> <p>风吹过来 你的消息 这就是我心里的歌</p> </li> <li> <p>当我老了 我真希望 这首歌是唱给你的</p> </li> </ul> </div>
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<x){//z<x是为了让循环只走一遍，如果去掉就是首尾不间断滚动
$(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);完整实例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
/* 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;
}
</style>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="scroll.js"></script>
<span>点击确定显示歌词</span><button>确定</button>
<div class="box" >
<div class="bcon">
<h2><b>当你老了</b></h2>
<!-- 代码开始 -->
<div class="list_lh">
<ul>
<li>
<p>当你老了 头发白了 睡意昏沉</p>
</li>
<li>
<p>当你老了 走不动了</p>
</li>
<li>
<p>炉火旁打盹 回忆青春</p>
</li>
<li>
<p>多少人曾爱你 青春欢畅的时辰</p>
</li>
<li>
<p>爱慕你的美丽 假意或真心</p>
</li>
<li>
<p>只有一个人还爱你 虔诚的灵魂</p>
</li>
<li>
<p>爱你苍老的脸上的皱纹</p>
</li>
<li>
<p>当你老了 眼眉低垂 灯火昏黄不定</p>
</li>
<li>
<p>风吹过来 你的消息 这就是我心里的歌</p>
</li>
<li>
<p>多少人曾爱你 青春欢畅的时辰</p>
</li>
<li>
<p>爱慕你的美丽 假意或真心</p>
</li>
<li>
<p>只有一个人还爱你 虔诚的灵魂</p>
</li>
<li>
<p>爱你苍老的脸上的皱纹</p>
</li>
<li>
<p>当你老了 眼眉低垂 灯火昏黄不定</p>
</li>
<li>
<p>风吹过来 你的消息 这就是我心里的歌</p>
</li>
<li>
<p>当我老了 我真希望 这首歌是唱给你的</p>
</li>
</ul>
</div>
<script>
$(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的高度
});
});
});
});
</script>
</body>
</html>看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
