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

效果：

jquery实现歌词滚动相关推荐

js+jquery实现歌词滚动播放
js+jquery实现歌词滚动播放效果图说明代码源码下载学习资源推荐效果图说明可快进,后退,播放完成自动重新播放代码 <!DOCTYPE html> <html l ...
java实现歌词滚动,jQuery实现的简单歌词滚动功能示例
本文实例讲述了jQuery实现的简单歌词滚动功能.分享给大家供大家参考,具体如下: jquery实现歌词滚动 1.css /* CSS Document */ * { margin: 0; paddi ...
分享一款jQuery全屏滚动页面特性案例
分享一款jQuery全屏滚动页面特性案例. 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子.可以说全屏滚动页面越来越受欢迎.它们就像是竖着的图片轮转一样. 这样的页面有很多,如:iPhon ...
[转]用 jQuery 实现页面滚动（Scroll）效果的完美方法
转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...
歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)，以vue项目为例...
歌词数据解析.歌词滚动.歌词进度控制功能的实现(基于js-base64.lyric-parser.better-scroll) 1.需求分析后台歌词接口返回的数据如下(base64字符串): W3R ...
java怎么往右浮动_[Java教程]jQuery实现页面滚动时智能浮动定位
[Java教程]jQuery实现页面滚动时智能浮动定位 0 2016-08-04 18:00:08 jQuery实现页面滚动时层智能浮动定位_前端开发 * { margin: 0; padding: ...
歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)，以vue项目为例
歌词数据解析.歌词滚动.歌词进度控制功能的实现(基于js-base64.lyric-parser.better-scroll) 1.需求分析: 后台歌词接口返回的数据如下(base64字符串): W3 ...
jQuery BreakingNews 间歇滚动
BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式--淡入淡出( ...
jquery实现的滚动新闻（多个实例代码）
网站地图: ...

jquery实现歌词滚动

jquery实现歌词滚动相关推荐

最新文章

热门文章