大家好,又见面了,我是全栈君
查看效果:http://hovertree.com/code/jquery/ueyf7gn4.htm
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery播放音乐 - 何问起</title><base target=_blank />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<link rel="stylesheet" href="http://hovertree.com/ziyuan/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="playHovertree btn btn-primary">播放</div>
<div class="pauseHovertree btn btn-primary">暂停</div>
<script src="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js"></script>
<script>
$(document).ready(function() {
var audioElementHovertree = document.createElement('audio');
audioElementHovertree.setAttribute('src', 'http://cms.hovertree.com/hovertreesound/hovertreesnow.mp3');
audioElementHovertree.setAttribute('autoplay', 'autoplay'); //打开自动播放
//audioElement.load()
$.get();
audioElementHovertree.addEventListener("load", function() {
audioElementHovertree.play();
}, true);
$('.playHover'+'tree').click(function() {
audioElementHovertree.play();
});
$('.pauseH'+'overtree').click(function() {
audioElementHovertree.pause();
});
});</script>
<br /><br />
By <a href="http://hovertree.com">何问起</a> <a href="http://hovertree.com/code/">代码</a>
</body>
</html>
更多特效:http://www.cnblogs.com/roucheng/p/texiao.html
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/120646.html原文链接:https://javaforall.cn