头像

响应式mp3音乐播放器网页底部自适应代码

来源:http://www.sucaihuo.com/js/1937.html 素材火管理员 2017-05-15 11:04浏览(173) 收藏

兼容移动端和PC端的响应式音乐播放器,可以固定在页面底部的MP3播放器,自带音乐列表(可任意添加),可调节音量。
响应式mp3音乐播放器网页底部自适应代码
分类:手机特效 > 响应式模板 难易:初级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 10

手机扫码访问:

下载资源 下载积分: 40 积分

页面底部自适应的MP3播放器,兼容移动端和PC端。

布局采用两侧固定像素列宽,播放进度条自动计算列宽的方式width: calc(100% - 168px),封面图片添加自动旋转特效。

@-webkit-keyframes rotating {
	from{
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
    	transform: rotate(0deg);
	}
	to{
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

可以任意添加歌曲,自由控制是否自动播放,大家自由发挥一下吧。

var audioFn = audioPlay({
		song : song,
		autoPlay : true  //是否立即播放第一首,autoPlay为true且song为空,会alert文本提示并退出
	});

	/* 向歌单中添加新曲目,第二个参数true为新增后立即播放该曲目,false则不播放 */
	audioFn.newSong({
		'cover' : 'images/cover4.jpg',
		'src' : 'http://so1.111ttt.com:8282/2016/5/06m/06/199061931237.m4a?tflag=1494769315&pin=a0b26b2dddd976d74724841f6d2641d6&ip=114.233.172.33#.mp3',
		'title' : '极乐净土 - GARNiDELiA'
	},false);
评论7
头像

友情提示:垃圾评论一律封号...

  • 头像 6楼
    05-24 16:01
    xiaowei
    不错!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  • 头像 5楼
    05-23 12:34
    503820911
    挺好的,下载来看看
  • 头像 4楼
    05-21 13:38
    赵清欢
    这个应该不是响应式吧 流泪
    1
    richer

    响应式的,兼容PC和移动端

  • 头像 3楼
    05-21 03:03
    ehgoo
    看起来还可以的说
  • 头像 板凳
    05-16 11:46
    joyer
    自适应效果很棒
  • 头像 椅子
    05-16 09:03
    a51821064
    挺不错的效果,看下!
  • 头像 沙发
    05-15 21:58
    liyan
    效果还可以!淡定
1 2