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

效果：