html,css,js(包含简单的 ES6语法) 实现 简单的音…
2019-05-08 07:26:09来源:博客园 阅读 ()
知识要点
- videoObject.load(): 加载某个视频(音频)文件,即重新播放
- videoObject.play(): 播放视频(音频)文件
- videoObject.remove(): 停止播放视频(音频)文件
ES6小知识
- const关键字:用来声明常量(即保持不变的量)
- let关键字:用来声明变量(即可以变化的量)
代码(背景图片,音频文件可以自己替换哈):
html:
<div class="container"> <div class="musicBox"> <div class="bottom"><img src="images/musicb.jpg" width="300" height="300"></div> <div class="top"><img src="images/musict.jpg" width="300" height="300"></div> </div> <div class="musicBox"> <div class="bottom"><img src="images/01.jpg" width="300" height="300"></div> <div class="top"><img src="images/00.jpg" width="300" height="300"></div> </div> <div class="musicBox"> <div class="bottom"><img src="images/03.jpg" width="300" height="300"></div> <div class="top"><img src="images/02.jpg" width="300" height="300"></div> </div> <audio src="autios/music0.mp3" loop></audio> <audio src="autios/music1.mp3" loop></audio> <audio src="autios/music2.mp3" loop></audio> </div>
css:
<style type="text/css"> body { background: url("images/bg.jpg") no-repeat; } .musicBox { width: 300px; height: 300px; position: relative; margin: 100px 100px; float: left; border-radius: 50%; } .bottom, .top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; box-shadow: 0 0 14px 2px #FF9800; overflow: hidden; } .top { transition: all 1s ease-in-out; transform-origin: bottom; } .bottom_rotate { animation: bottom_rotate 6s linear infinite; } @keyframes bottom_rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .music { transform: rotateX(180deg); } </style>
javascript:
<script type="text/javascript"> const topList = document.querySelectorAll(".top"); const bottomList = document.querySelectorAll(".bottom"); const audioList = document.querySelectorAll("audio"); // 声明一个阀门:用来表示音频的是否播放 let flag = 1; for (let i = 0; i < topList.length; i++) { topList[i].addEventListener("click", function () { if (flag == 1) { this.classList.add("music"); // videoObject.load(): 用来加载某个视频(音频)文件,即重新播放 audioList[i].load(); // videoObject.play(): 播放 audioList[i].play(); // element.classList.add(): 为元素添加 CSS 类 bottomList[i].classList.add("bottom_rotate"); flag = 0; } else { this.classList.remove("music"); // videoObject.pause(): 停止播放 audioList[i].pause(); // element.classList.remove(): 为元素移除 CSS 类 bottomList[i].classList.remove("bottom_rotate"); flag = 1; } }, false); } </script>
原文链接:https://www.cnblogs.com/duxiu-fang/p/10819880.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:JS 07 Dom
下一篇:页面刷新后进行的操作
- 根据分辨率调用css文件的方法 2020-03-19
- JS批量操作CSS属性详细解析 2020-02-29
- 详解HTML5 使用video标签实现选择摄像头功能 2020-02-07
- Extjs Label的 fieldLabel和html属性值对齐的方法 2020-01-07
- JavaScript访问CSS属性的几种方式介绍 2020-01-07
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash