JavaScript

超轻量级php框架startmvc

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

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

更新时间：2020-08-10 23:12:01 作者：startmvc
本文实例讲述了jQuery实现的简单歌词滚动功能。分享给大家供大家参考，具体如下：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


<span>点击确定显示歌词</span><button>确定</button>
 <div class="box" style="display: none;">
 <div class="bcon">
 <h1><b>当你老了</b></h1>
 <!-- 代码开始 -->
 <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>www.jb51.net jQuery歌词滚动</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;
}
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;
}
</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" style="display: none;">
 <div class="bcon">
 <h1><b>当你老了</b></h1>
 <!-- 代码开始 -->
 <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>

效果：

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

jQuery 歌词滚动
文章分类
相关文章

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