2016-9-26
完成了：
（1）看了30天；
（2）看了专套本；
（3）9-18看完了。
完成了：
（1）看了30天；
（2）看了专套本；
（3）9-18看完了。
9-18收获：
<span style="font-family:Microsoft YaHei;font-size:14px;"><!--李半仙音乐盒-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>MusicBox</title>
<style>
*{margin:0;padding:0;}
/*不平铺*/
html{height:100%;}
/*添加模糊度-webkit-filter:blur(2px);*/
body{background:url("images/乔巴1.jpg");background-size:100% 100%;}
/*彩色color:transparent;background-image:-webkit-linear-gradient(left,red,blue,yellow,red,blue,yellow,red,blue,yellow);-webkit-background-clip:text;*/
h1{font-size:30px;font-family:"微软雅黑";text-align:center;line-height:70px;color:transparent;background-image:-webkit-linear-gradient(left,red,blue,yellow,red,blue,yellow,red,blue,yellow);-webkit-background-clip:text;animation:play 3s linear infinite;}
/*电影名字叫play,播放时间为3s,匀速播放linear infinite*/
/*给li化妆去黑点:list-style:none;*/
li{list-style:none;}
/*Music Start*/
#Music{width:850px;height:600px;margin:0 auto;}
#Music #Music_Content{width:850px;height:530px;background:#ccc;opacity:0.85;}
/*一山不容三虎，得要它们谈恋爱才行，连续使用float:left,right使其对齐*/
/*background:url("图片");*/
#Music #Music_Content .MusicL{width:620px;height:488px;background:url("images/乔巴.gif");background-size:100% 100%;float:left;}
/*background:rgba(red,green,blue,opacity)*/
#Music #Music_Content .MusicR{width:230px;height:488px;background:rgba(0,0,0,0.2);float:right;font-family:"微软雅黑";}
/*ul也可以当作一个盒子*/
#Music #Music_Content .MusicR ul{width:120px;height:160px;margin:14px auto;}
/*给ul下面的img图片border-radius圆角,给它一个盒阴影box-shadow*/
#Music #Music_Content .MusicR ul img{border-radius:4px;box-shadow:0px 0px 4px black;}
/*给第二个li化妆:li:nth-child(2)*/
#Music #Music_Content .MusicR ul li:nth-child(2){text-align:center;line-height:24px;color:#ccffff;}
/*overflow:auto;是使多出来的歌词放在下滑表里面*/
#Music #Music_Content .MusicR .Text{width:100%;height:300px;background:yellow;font-size:14px;color:#8c4bf8;text-align:center;line-height:24px;overflow:auto;}
/*给滚动条化妆,注意要有两个冒号,不过我觉得默认的也很好看*/
/*.Text::-webkit-scrollbar{width:5px;background:#ccc;}
.Text::-webkit-scrollbar-button{background-color:#e5e5e5;}
.Text::-webkit-scrollbar-thumb{background:#999;}*/
/*渐变色background:linear-gradient(#3881fa,#d807e9);*/
/*使用定位,使按钮居中*/
#Music #Music_Content .Footer{width:850px;height:42px;background:linear-gradient(#3881fa,#d807e9);float:left;position:relative;}
#Music #Music_Content .Footer .Button{width:160px;height:40px;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
#Music #Music_Content .Footer .Button .Btn{width:40px;height:40px;background:red;float:left;margin-left:10px;}
#Music #Music_Content .Footer .Button .Prev{background:url("images/Prev.png");}
#Music #Music_Content .Footer .Button .Play{background:url("images/Play.png");}
#Music #Music_Content .Footer .Button .Next{background:url("images/Next.png");}
/*End Music*/
/*TextColor Start*/
.TextColor{color:red;font-size:18px;transition:0.5s;}
/*End TextColor*/
/*让文字动,简直就是叼爆了，玩转了，这不是一张图片呀，这是用代码写出来的呀*/
@keyframes play{
from{background-position:0px 0px;}
to{background-position:300px 0px;}
}
</style>
</head>
<body>
<!--Music Start-->
<div id="Music">
<h1>李半仙音乐播放器</h1>
<div id="Music_Content">
<div class="MusicL"></div>
<div class="MusicR">
<ul>
<!--在li里面插入图片,可直接在src后面写属性width,height-->
<li><img src="images/hc.jpg" width="120px" height="130px"/></li>
<li>《爱情转移》</li>
</ul>
<!--再来一个盒子放歌词-->
<div class="Text">
</div>
</div>
<div class="Footer">
<div class="Button">
<div class="Btn Prev"></div>
<div class="Btn Play"></div>
<div class="Btn Next"></div>
</div>
</div>
</div>
</div>
<!--End Music-->
<!--插入音乐:audio-->
<audio src="1.mp3" id="MyMusic"></audio>
<!--插入歌词(歌词目录在音乐播放器里面找)-->
<textarea id="lrc" style="width:400px;height:300px;display:none;">
[ver:v1.0]
[ti:1037102]
[00:01.06]爱情转移 - 陈奕迅
[00:22.93]徘徊过多少橱窗
[00:25.29]住过多少旅馆
[00:27.33]才会觉得分离
[00:29.65]也并不冤枉
[00:31.71]感情是用来浏览
[00:33.98]还是用来珍藏
[00:36.41]好让日子
[00:37.51]天天都过得难忘
[00:40.88]熬过了多久患难
[00:43.24]湿了多长眼眶
[00:45.41]才能知道伤感
[00:47.73]是爱的遗产
[00:50.05]流浪几张双人床
[00:52.29]换过几次信仰
[00:54.60]才让戒指
[00:55.75]义无反顾的交换
[00:59.15]把一个人的温暖
[01:01.43]转移到另一个的胸膛
[01:03.85]让上次犯的错
[01:05.80]反省出梦想
[01:07.57]每个人都是这样
[01:10.84]享受过提心吊胆
[01:13.04]才拒绝做爱情待罪的羔羊
[01:18.09]回忆是抓不到的月光
[01:20.39]握紧就变黑暗
[01:22.56]等虚假的背影
[01:24.33]消失于晴朗
[01:27.24]阳光在身上流转
[01:29.07]等所有业障被原谅
[01:34.83]爱情不停站
[01:36.60]想开往地老天荒
[01:39.26]需要多勇敢
[01:43.36]烛光照亮了晚餐
[01:45.82]照不出个答案
[01:48.03]恋爱不是温馨的
[01:50.64]请客吃饭
[01:52.67]床单上铺满花瓣
[01:54.89]拥抱让它成长
[01:57.08]太拥挤就开到了
[01:59.45]别的土壤
[02:01.79]感情需要人接班
[02:04.10]接近换来期望
[02:06.32]期望带来失望的
[02:08.95]恶性循环
[02:10.80]短暂的总是浪漫
[02:13.15]漫长总会不满
[02:15.38]烧完美好青春
[02:17.56]换一个老伴
[02:20.09]把一个人的温暖
[02:22.20]转移到另一个的胸膛
[02:25.15]让上次犯的错
[02:26.85]反省出梦想
[02:28.60]每个人都是这样
[02:31.54]享受过提心吊胆
[02:34.24]才拒绝做爱情
[02:35.93]待罪的羔羊
[02:37.58]回忆是抓不到的月光
[02:41.51]握紧就变黑暗
[02:43.46]等虚假的背影
[02:45.21]消失于晴朗
[02:48.00]阳光在身上流转
[02:50.31]等所有业障被原谅
[02:54.81]爱情不停站
[02:56.74]想开往地老天荒
[02:59.67]需要多勇敢
[03:04.23]把一个人的温暖
[03:06.53]转移到另一个的胸膛
[03:09.40]让上次犯的错
[03:11.49]反省出梦想
[03:14.18]每个人都是这样
[03:16.44]享受过提心吊胆
[03:18.93]才拒绝做爱情
[03:20.59]待罪的羔羊
[03:23.58]回忆是抓不到的月光
[03:26.21]握紧就变黑暗
[03:28.27]等虚假的背影
[03:30.33]消失于晴朗
[03:33.01]阳光在身上流转
[03:35.16]等所有业障被原谅
[03:42.37]爱情不停站
[03:44.11]想开往地老天荒
[03:47.47]需要多勇敢
[03:52.70]你不要失望
[03:54.50]荡气回肠是为了
[03:57.47]最美的平凡
</textarea>
<!--引用第三方类库-->
<script src="js/jquery-1.11.1.min.js"></script>
<script>
/*点击按钮开始播放.get(0).play(),$代表找到谁根据class或id取名用.或#,注意每次点击的时候以防k重新赋值为2，所以将var k=0放在函数外面*/
var k=0;
$(".Play").click(function(){
if(k==0){
$("#MyMusic").get(0).play();
//找到这个并化妆背景为暂停,双引号里面是单引号
$(this).css("background","url('images/Pause.png')");
k=1;
}else{
//把play改为pause就是暂停了！
$("#MyMusic").get(0).pause();
//找到这个并化妆背景为开始,双引号里面是单引号
$(this).css("background","url('images/Play.png')");
k=0;
}
});
/*获取歌词*/
/*alert(lrc);不行,因为不知道lrc是什么,必须要var一个lrc,其中.val()表示对象实例化*/
var lrc=$("#lrc").val();
//console.log(lrc);
//把时间和歌词分离
var lrcArr = lrc.split("[");
//console.log(lrcArr);
var html ="";
for(var i=0;i<lrcArr.length;i++){
//console.log(lrcArr[i]);
var arr = lrcArr[i].split("]");//将已经去掉[的歌词再次去掉],以致时间与歌词用,分开;分开之后逗号左边为arr[0],逗号右边为arr[1];
//console.log(arr[1]);
//拿到时间,s,ms
var timer=arr[0].split(".");//秒与毫秒分隔开,左边为timer[0],右边为timer[1]
//console.log(timer[0]);
var s=timer[0].split(":");
//console.log(s[0]);
var ms=s[0]*60+s[1]*1;//分钟*60+秒
//取歌词
var message=arr[1];
//console.log(message);
if(message!=null){
//双引号里面要为单引号，然后单引号里面还能有双引号
html +="<p id='"+ms+"'>"+message+"</p>";
}
//找到Text并添加内容在里面
$(".Text").html(html);
}
//歌词联动,注意是timeupdate而不是timeupdata
$("#MyMusic").get(0).addEventListener("timeupdate",function(){
//获取播放时间
var timer= this.currentTime;
//通过时间来驱动歌词
var s=parseInt(timer);
for(var i=0;i<s;i++){
//$找到当前的#，id嘛。给它添加一个样式红色字,变大,有过渡。
$("#"+i).addClass("TextColor").siblings().removeClass("TextColor");
}
//自动滑动,scrollTop距离顶部的距离不断加嘛,-的后面是9是从第多少行开始下滑，*26是下滑多少距离
//找到Text滑轮框并距离滑轮顶部的距离为找到添加的TextColor这个样式
$(".Text").scrollTop(($(".TextColor").index()-9)*26);
});
</script>
</body>
</html></span>
扫一扫
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
