前端项目——实现qq音乐网页版本(样式+获取数据+播放)
前端项⽬——实现qq⾳乐⽹页版本（样式+获取数据+播放）
这是⼀个完整的项⽬实现，内容包括⽹页排版，利⽤js css实现⼀些动态特效，特在此记录项⽬实现过程中的核⼼思想，以及难点的解决⽅法和在此项⽬中学到的新知识。
⾸先看⼀下该项⽬的官⽹效果
可以看到该⽹页的实现我们可以将其分为5个部分，即1.导航栏2.歌单推荐栏、新歌⾸发、精彩推荐、新碟⾸发、MV3.排⾏榜4.⼀个固定在页⾯右侧的窗⼝，话不多说，接下来开始实现布局。
⼀、导航栏
⽏庸置疑⾸先创建⼀个铺满全局的div，然后创建⼀个div⽤来装我们的导航栏部分，在这⾥我⼜分为了4个div，分别实现第⼀⾏列表，搜索部分，登录部分，和第⼆⾏列表，可以看到这个导航栏还是⽐较经典的格式，这⾥都通过ul标签实现即可，没有什么复杂的点。
⼀、css部分：
居中效果：外层⼤盒⼦宽⾼百分百，内层固定宽⾼margin：0 auto;
清除浮动：在对li设置浮动后，在ul后加伪类::after{}清除浮动（注意 content：‘’；必须写）
对于a标签的⽂字样式：注意，若a标签存在于⼀个标签内，直接对外标签设置⽂字样式，a标签⽆法继承这些属性。
特效实现，1.⿏标覆盖上⽂字，⽂字变⾊，直接利⽤：hover实现。
2.⿏标覆盖，画出下拉框: 在存在下拉框的li标签（块元素）内部，创建⼀个div利⽤定位，将其固定到合适的位置，在实现样式。然后最初将其样式设置为display：none；利⽤hover效果在⿏标移动到li标签上，其display变为block；即可实现。
⼆、js部分：刚刚利⽤css实现下拉栏效果只能设置开通vip部分（在存在下拉框的li标签（块元素）内部，创建⼀个div）⽽充值部分⽆法正确快捷设置，因为官⽹效果上，在滑到li标签时不仅出现下拉栏，⽽li本⾝是⽩⾊，在⿏标覆盖到上有变成绿⾊的效果移动到⼦元素，⼜变完⽩⾊。所以⽤css实现起来⽐较复杂。所以我们脱离在⼦元素内设置div的想法，在li后设置，这样就可以避免hover⼦元素的影响了，然后直接简单的监听mouseover、mousedone从⽽改变display属性值即可
总结：在这种下滑栏效果实现时：当hover：若⼦元素改变属性时，⽗元素也要改变某种属性，那么我们就将此div设置于⽗元素之后，利⽤js；若只是单纯的只有⽗元素或只有⼦元素有属性改变，则将此div设置于⽗元素内，利⽤css即可。
⼆、歌单推荐+新歌⾸发+精彩推荐+新碟⾸发+MV
这⼏个模块在效果上都是⼀样的，所以放到⼀起说。
⼀、css部分
1.⽂字居中：两种⽅法①⽂字div设置margin 0 auto，设置宽⾼，设置display：flex；主轴居中。②在对外div设置居中的基础上，对p元素设置宽⾼，margin 0 auto；
2.下⽅ul居中：由于这⾥我利⽤了绝对定位，使其脱离⽂档流，所以普通的margin：0 auto;⽆效，由于实现左右居中，所以使
left:0;,right:0；之后在设置margin即可。当然也可以直接利⽤padding给它挤过来…（最初的⽩痴做法）
3.下⽅的歌单列表静态样式不在赘述，并且对同⼤⼩的img盒⼦div设置overflow：hidden;⾄于变暗部分在img后设置⼀个div(mask)，利⽤定位重叠于img，最初透明⾊，⿏标移⼊变⾊。
qq音乐不能播放
⼆、js部分
这⾥有两个圆点，点击跳转页⾯，⿏标移⼊还会出现两个按钮，实现滚动切换页⾯，并且覆盖在上⾯会使图⽚视觉拉近，变暗）
⾸先说下最简单的1.视觉拉近(坑点)：⼀定是对div（mask）元素设置hover实现img元素的scale（1.1）。
2.画⾯切换：两个ul外有⼀个wrap（作为视觉窗⼝，通过设置定位从⽽实现滚动效果）为按钮添加后，点击时更改wrap的left值。
3.圆点效果实现：⾸先⼀个圆点清空函数，清除样式（颜⾊），然后复杂的点来了…这⾥说下整体思路⾸先实现点击滚动，对于圆点点击事件：封装⼀个判断函数：获取wrap视觉窗⼝的left值，从⽽判断出现在处于哪个ul显⽰区再为圆点设置⼀个属性num，分别等于0、1、利⽤计算让其与left发⽣关联，从⽽使对应的颜⾊发⽣变化，上述过程封装到⼀个函数⾥，（⽅便mouseout事件使⽤）.接下来就是⿏标移动到圆点上，其颜⾊的变化，这⾥还要判断当前带特效的圆点，是否为展⽰页⾯所关联的圆点，若不是则移出时变回本⾊，若是则仍保持特效⾊。
4.⿏标移⼊到图⽚上，会有⼀个⼩的播放按钮出现，并且是以⼀种渐变的效果呈现，这⾥我才⽤的⽅法是对该播放按钮设置初值为
scale（0） 在⿏标移⼊时变成scale（1），移出时恢复scale（0）这样就可以出现渐变缩放消失效果啦~
5.⿏标移⼊到图⽚上，图⽚会在视觉上拉近距离，这⾥实现⽅法为：为img标签设置⼀个盒⼦，该盒⼦宽⾼固定，并且拥有
overflow:hidden；属性，然后⿏标移⼊时img放⼤，移出时恢复，即可实现啦。
总结:
1.最初实现图⽚变暗，缩放时妄想只⽤css，后来发现mask⽣效时必须在img上层，这时img的hover失效，所以必须⽤js实现缩放效果。
2.圆点实现获取left值，注意获取的是xxpx字符串，所以利⽤slice（）⽅法截取后，并Number转换。
3.滚动效果，对wrap，left设置的值为-ul的长度，下⼀个变为-2ul的长度，上⼀个恢复为最初。（最初设置⾏间样式初始值不然js⽆法获取的到）
4.为li设置浮动⽆效时为ul设置宽度
三、排⾏榜
⼀、css部分：
这⾥的样式设计没有什么难点，就是⽐较费时间，值得⼀提的是官⽹的此处背景是引⼊的背景图⽚（
五张连在⼀起），被迫利⽤background-position进⾏调整位置。
⼆、js部分：
这⾥的特效效果为⿏标移⼊，中间横线变为播放按钮，移出恢复，且背景图⽚也相应拉近。
1.横线转换部分：
监听每个li，⿏标移⼊到后，横线所在的div display：none；因为display这个属性，它在html中不在占据位置。此外，在同位置上设置播放按钮的样式，最初仍是scale（0）,⿏标移⼊后它变⼤，移出缩回。
2.背景图⽚拉近效果同上。
总结：这⾥的css部分新掌握的内容为对于⽂字的展⽰部分，在设置超出部分以省略号的形式显⽰时，通常要设置三个属性：white-space：nowrap；
text-overflow：eclipse；over-flow：hideen；此外这三个属性，要直接对你⽂字所在的标签设置，尤其要注意的是 a标签⽂字设置样式时不继承⽗类！
四、轮播按钮部分
⽹页有⼀个特点，就是移⼊到每⼀块（除排⾏榜）都会有⼀左⼀右两个button滑出，移⼊⼜会滑⾛(隐藏到屏幕两侧)并且，不会随页⾯缩放位置发⽣变化。
css：这⾥就是简单的button即可，重点是它相对于定位的⽗类必须宽度是100%，这样才可以实现其
页⾯缩放时位置总是从两侧滑出来，所以为他的⽗类设置width：100%，position：relative；再对它设置absolute
js：为每个模块，挂，移⼊时，prebutton的left：-按钮宽度，nextbutton的right：-按钮宽度。移出时为0即可。
五、固定视窗
这⾥都是基本的样式，不在赘述。
总结：在实现的过程中，成功解决了⼀个知识盲点：就是在对内联元素设置margin：0 auto；居中时，光设置宽⾼是⽆效的，必须要将其设置为块元素，才⽣效！
六、页脚部分

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。