使用jQuery怎么实现一个歌词滚动功能
使用jQuery怎么实现一个歌词滚动功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
成县网站建设公司 创新互联 ,成县网站设计制作，有大型网站制作公司丰富经验。已为成县上1000家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司 要多少钱，请找那个售后服务好的成县做网站 的公司定做！
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
点击确定显示歌词 确定
当你老了
当你老了 头发白了 睡意昏沉
当你老了 走不动了
炉火旁打盹 回忆青春
多少人曾爱你 青春欢畅的时辰
爱慕你的美丽 假意或真心
只有一个人还爱你 虔诚的灵魂
爱你苍老的脸上的皱纹
当你老了 眼眉低垂 灯火昏黄不定
风吹过来 你的消息 这就是我心里的歌
多少人曾爱你 青春欢畅的时辰
爱慕你的美丽 假意或真心
只有一个人还爱你 虔诚的灵魂
爱你苍老的脸上的皱纹
当你老了 眼眉低垂 灯火昏黄不定
风吹过来 你的消息 这就是我心里的歌
当我老了 我真希望 这首歌是唱给你的
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完整实例代码：
点击确定显示歌词 确定
当你老了
当你老了 头发白了 睡意昏沉
当你老了 走不动了
炉火旁打盹 回忆青春
多少人曾爱你 青春欢畅的时辰
爱慕你的美丽 假意或真心
只有一个人还爱你 虔诚的灵魂
爱你苍老的脸上的皱纹
当你老了 眼眉低垂 灯火昏黄不定
风吹过来 你的消息 这就是我心里的歌
多少人曾爱你 青春欢畅的时辰
爱慕你的美丽 假意或真心
只有一个人还爱你 虔诚的灵魂
爱你苍老的脸上的皱纹
当你老了 眼眉低垂 灯火昏黄不定
风吹过来 你的消息 这就是我心里的歌
当我老了 我真希望 这首歌是唱给你的
