欢迎您访问我爱IT技术网,今天小编为你分享的javascript教程:【实现音乐播放器的代码(html5+css3+jquery)】,下面是详细的讲解!
实现音乐播放器的代码(html5+css3+jquery)
看下面的效果图很不错吧,是怎么实现的呢?下面小编给大家分享下我的一番宝物,Lisa唱的 在angel beats的插曲。用到html5、css、jquery实现此音乐播放器。
一番宝物,Lisa唱的 在angel beats的插曲
最后在简述这个东西怎么写之前,本人男,24岁,籍贯上海,诚招女友一枚,要求:性格温顺。。。(省略500字)
<div class="Music"> <div class="MusicPlaySound"> <img class="MusicPlayBg" src="http://www.jb51.net/article/image/music/zsy.png" /> <img class="MusicPlayProcess rotate" src="http://www.jb51.net/article/image/music/yyjd.png" /> <div class="MusicPlayBox"> <h3 class="title">一番の宝物</h3> <p class="name">Lisa(Yui final ver)</p> <div class="MusicPic"> <img class="MusicPicName PicNameRotate" src="http://www.jb51.net/article/image/music/yifan.jpg" /> <img class="MusicPicButton" src="http://www.jb51.net/article/image/music/pause.png" /> </div> <div class="Share icon">分享</div> <div class="Next icon">切歌</div> </div> </div> <audio src="http://www.jb51.net/article/music/Yuiki.mp3" autoplay=""></audio> </div>
html部分就这样略过了。。。。基本都会写。。。
.MusicPlayProcess.rotate{animation:rotate 30s infinite linear;} .MusicPlayProcess.pause{animation-play-state:paused; -webkit-animation-play-state:paused;} .MusicPicName.PicNameRotate{animation:rotate 4s infinite linear;} .MusicPicName.pause{animation-play-state:paused; -webkit-animation-play-state:paused;} @keyframes rotate{ from{ transform:rotate(0deg)} to{ transform:rotate(360deg)} }
css部分么主要挑点有趣的
大概么这么几个css3动画。。。。上面那个
.MusicPlayProcess.rotate
{ animation: rotate 30s infinite linear;}
你可以把这个30s改成歌曲时间长度就变成进度条了 O~HOHOHOHO(懒人总有懒办法)
infinite 么无限播放么你也懂得
.MusicPicName.pause{animation-play-state:paused;
-webkit-animation-play-state:paused;}
然后么暂停动画、、、、
兼容性是个硬伤其他没什么
$(function(){ var play=1; $(".MusicPicButton").click(function(){ if(play==0){ $(this).attr("src","image/music/pause.png") $(".MusicPlayProcess").removeClass("pause") $(".MusicPicName").removeClass("pause") $("audio").get(0).play(); play=1; }else{ $(this).attr("src","image/music/play.png") $(".MusicPlayProcess").addClass("pause") $(".MusicPicName").addClass("pause") play=0; $("audio").get(0).pause(); } }) })
这里是Jq部分
play么确定当前状态1播放0暂停
$("audio").get(0).play();
$("audio").get(0).pause();
以上就是本文的全部内容,希望大家喜欢。
关于实现音乐播放器的代码(html5+css3+jquery)的用户互动如下:
相关问题:js代码,jquery特效和css3,html5有什么区别
答:JavaScript 是世界上最流行的编程语言。 这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(... >>详细
相关问题:HTML5+CSS3+jQuery应用之美(韩国)yamoo 写的,书...
答:人民邮电的官网上有提供源码下载 >>详细
相关问题:HTML5+CSS3+jQuery应用之美
答:html5+css3+jquery应用之美的资源网上直接可以下载的。 《HTML5+CSS3+jQuery应用之美》适合Web设计人员和前端开发人员阅读,也适合作为相关培训用途的参考用书。 >>详细
- 【Array】js中更短的 Array 类型转换-类型转换
- 【ExtJs】ExtJs 表单提交登陆实现代码-表单提交-
- 【Ajax】jQuery 学习第六课 实现一个Ajax的TreeVi
- 【extjs】extjs每个组件要设置唯一的ID否则会出错
- 【focus】JavaScript使用focus()设置焦点失败的解
- 【bootstrap3】基于bootstrap3和jquery的分页插件
- 【hover】jQuery控制图片的hover效果(smartRollo
- 【ajax更新数据库】ajax异步刷新实现更新数据库-
- 【div】div浮层 滚动条移动 位置保持不变的4种方
- 【AngularJS】举例讲解AngularJS中的模块-模块
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-