教你用css3实现图片容器内等比缩放,教你用c3实现图片容器内等比缩放......
2023-03-16 251 CSS
如何做一个CSS3音乐播放器
来源：互联网
2023-03-16 19:17:33 403
在移动互联网的年代，html5和css3已经越来越受到欢迎。那怎么利用css3做一个有特色的播放器呢？下面就按照豆瓣的音乐播放器为例子。
工具/原料
- 网页编辑器
- Photoshop
- Chrome浏览器
方法/步骤
在html中加入audio元素，并且去掉原有的样式。
做好友好提示，当用户浏览器不支持时，提示升级浏览器。
给新的播放器，添加html元素，按照播放的设计稿添加，如暂停/播放按钮、进度条、声音键、暂停键等等。
为播放器添加css样式，使得变成豆瓣播放器的样子，具体代码如下：
建立好框架后，就要给播放器添加实际功能。首先先引入各个JS文件。
第一个是基本的jquery文件，网上下载最新版本即可。
第二个是音乐列表，列名文件名称、地址、歌曲名称、歌手名字、封面图片和唱片，用于显示歌曲信息时用，具体如下图。
第三个是实现播放功能的jquery代码。
实现播放功能的jquery代码，首先初始化代码，导入音乐文件，并且给音乐播放器添加第一首歌信息；
设置暂停、播放时间，并且设置时间变化。
继续添加时间条变化、时间标准显示和点击修改音量事件。
切换歌曲设置，上一首歌和下一首歌，并且能循环播放。
最后是歌曲音量的调整和歌曲播放结束事件。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： CSS
上一篇：如何创建CSS文件 下一篇：HTML5&CSS3：[3]拖拽图片到浏览器并显示
相关文章
- 详细阅读
-
怎么用div布局加css样式做网页详细阅读
怎么用div布局加css样式做网页,怎么做一个网页呢，静态页面的制作是很简单的，我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 417 CSS
-
css基础教程：[1]为网页使用网络字体详细阅读
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f34c65fc66ef4fcf5ef0d411f.jpg)
css基础教程：[1]为网页使用网络字体,本教程为大家介绍在网页上怎么使用网络字体。1，使用网络字体的好处是所有人看到的效果都是样的，效果统一，2，不依赖于用户电脑上是否安装了该字体。......
2023-03-16 259 CSS