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> <div> <h1><b>当你老了</b></h1> <!-- 代码开始 --> <div> <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> 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="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://www.jb51.net/scroll.js"></script> <span>点击确定显示歌词</span><button>确定</button> <div> <div> <h1><b>当你老了</b></h1> <!-- 代码开始 --> <div> <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>
效果：
