使用jQuery怎么实现一个歌词滚动功能
使用jQuery怎么实现一个歌词滚动功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
1.css
/*CSSDocument*/
*{
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:1pxsolid#0096BE;
margin:30pxauto;
}
.box{
/*width:980px;*/
margin:0auto;
}
.bcon{
width:270px;
border:1pxsolid#eee;
margin:30pxauto;
}
.bconh2{
border-bottom:1pxsolid#eee;
padding:010px;
}
.bconh2b{
font:bold14px/40px'宋体';
border-top:2pxsolid#3492D1;
padding:08px;
margin-top:-1px;
display:inline-block;
}
.list_lh{
height:400px;
overflow:hidden;
}
.list_lhli{
padding:10px;
overflow:hidden;
}
.list_lhli.lieven{
background:#F0F2F3;
}
.list_lhlip{
line-height:24px;
}
.list_lhlipa{
float:left;
}
.list_lhlipem{
width:80px;
font:normal12px/24pxArial;
color:#FF3300;
float:right;
display:inline-block;
}
.list_lhlipspan{
color:#999;
float:right;
}
.list_lhlipa.btn_lh{
background:#28BD19;
height:17px;
line-height:17px;
color:#fff;
padding:05px;
margin-top:4px;
display:inline-block;
float:right;
}
.btn_lh:hover{
color:#fff;
text-decoration:none;
}
.btmp{
font:normal12px/24px'MicrosoftYaHei';
text-align:center;
}2.html
<span>点击确定显示歌词</span><button>确定</button> <divclass="box"> <divclass="bcon"> <h2><b>当你老了</b></h2> <!--代码开始--> <divclass="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_lhli: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
//JavaScriptDocument
(function($){
$.fn.myScroll=function(options){
//默认配置
vardefaults={
speed:40,//滚动速度,值越大速度越慢
rowHeight:24//每行的高度
};
varopts=$.extend({},defaults,options),intId=[];
varx=$("ul").find("li").length;//找到li的个数
varz=0;
functionmarquee(obj,step){
obj.find("ul").animate({
marginTop:'-=1'
},0,function(){
z=z+1;
vars=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){
varsh=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);完整实例代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<style>
/*CSSDocument*/
*{
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:1pxsolid#0096BE;
margin:30pxauto;
}
.box{
/*width:980px;*/
margin:0auto;
}
.bcon{
width:270px;
border:1pxsolid#eee;
margin:30pxauto;
}
.bconh2{
border-bottom:1pxsolid#eee;
padding:010px;
}
.bconh2b{
font:bold14px/40px'宋体';
border-top:2pxsolid#3492D1;
padding:08px;
margin-top:-1px;
display:inline-block;
}
.list_lh{
height:400px;
overflow:hidden;
}
.list_lhli{
padding:10px;
overflow:hidden;
}
.list_lhli.lieven{
background:#F0F2F3;
}
.list_lhlip{
line-height:24px;
}
.list_lhlipa{
float:left;
}
.list_lhlipem{
width:80px;
font:normal12px/24pxArial;
color:#FF3300;
float:right;
display:inline-block;
}
.list_lhlipspan{
color:#999;
float:right;
}
.list_lhlipa.btn_lh{
background:#28BD19;
height:17px;
line-height:17px;
color:#fff;
padding:05px;
margin-top:4px;
display:inline-block;
float:right;
}
.btn_lh:hover{
color:#fff;
text-decoration:none;
}
.btmp{
font:normal12px/24px'MicrosoftYaHei';
text-align:center;
}
</style>
</head>
<body>
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<scriptsrc="scroll.js"></script>
<span>点击确定显示歌词</span><button>确定</button>
<divclass="box">
<divclass="bcon">
<h2><b>当你老了</b></h2>
<!--代码开始-->
<divclass="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_lhli: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>看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注恰卡编程网行业资讯频道，感谢您对恰卡编程网的支持。
目录
推荐阅读
0 条评论
本站已关闭游客评论，请登录或者注册后再评论吧~