转光碟
image.png
黑胶边缘是浅色的白边
image.png
在加一个图片，起反光作用
再加一个封面
再加一个播放按钮（用SVG做）
还有一个播放探针
div分3部分
image.png
image.png
探针相对于container是绝对定位的
image.png
这些位置最好不要用像素来写，因为一旦变宽了，像素就不对了，vw是以页面的宽度来固定
如何把背景图片变模糊
image.png
这里的这个filter:blur(5px)，是高斯模糊，问题是会对所有的进行模糊，包括“你好”
如果只想模糊背景
方法：把要模糊的部分放到伪类里
image.png
背景模糊了，字不会模糊
image.png
这里的封面是一个链接（存在别个地方），也可以再做一个拖拽匡，拖拽图片，存到七牛里，给出一个图片保存外链放这里
song-list里增加一个封面cover
让歌曲播放的背景动态变成歌曲的cover
还有一个是转盘的背景动态变成歌曲的cover
接下来做播放功能，把mp3给render进来
image.png
image.png
image.png
问题：歌曲播放完后，还在转动
搜 audio play end
有事件，ended
image.png
mdn里搜，代码写在这里没有用，因为，ended不会冒泡，即不会结束了不会通知他爸爸
那么只能在view里做
image.png
image.png
用了MVC就要遵循MVC的规则
接下来做歌词
先把歌词保存到管理页面
然后刷新打印出来
image.png
image.png
让每一行弄一个p标签
image.png
image.png
image.png
接下里播放歌词
image.png
transformY滚动歌词
类似轮播
不要时间轴
用正则
把字符串变成了数组
image.png
接下来把播放时间和歌词对应上
image.png
image.png
怎么找？
上一个p的时间比我早，下一个p的时间比我大，那这个就是展示的中间值
先把时间格式统一
可以用正则，也可以用split
image.png
转换时间、计算时间、显示时间
image.png
image.png
问题：最后一行是没有i+1的
加个判断
image.png
滚动显示：p元素距离顶部的高度
image.png
我想知道这个歌词距离div的高度
用截图里的高度减去外面div的高度即可
image.png
这个思路不行，歌词会上下跳动，换思路
image.png
网友评论