Fazer o botão acionar música ao clicar
Gostaria que o botão ao ser acionado (clicado) começasse a tocar a musica desejada (a tela é um preloder para a página principal), além disso gostaria de saber como faço para que depois que o preloder acabasse sege direcionado a pagina principal (index).
OBS: O código eu peguei pronto e mudei algumas coisas com o que eu tenho de conhecimento.
Agradeço pela ajuda
Segue o código abaixo:
<!DOCTYPE HTML>
<html>
<head>
<script src="[https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">](https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js)
<script src="src/jquery.percentageloader-0.1.js"></script>
<link rel="stylesheet" href="src/jquery.percentageloader-0.1.css"></script>
<style>* {
margin: 0;
padding: 0;
}html {
background: url("imagens/sky.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-size: cover;
position:absolute;
left:50%;
top:50%;
;
margin-top:-40px;
}
body {
margin: 0px;
padding: 0px;
}
#topLoader {
width: 256px;
height: 256px;
margin-bottom: 32px;
}
#container {
width: 940px;
padding: 10px;
margin-left: auto;
margin-right: auto;
}
#animateButton {
width: 256px;
.button
display: inline-block;
border-top:1px solid #96d1f8;
background-color:#28597a;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;
box-shadow:rgba(0,0,0,1) 0 1px 0;
text-shadow:rgba(0,0,0,.4) 0 1px 0;
color:#FFF;
font-size:16px;
font-family:verdana;
text-decoration:none;
vertical-align:middle;
padding:6px 12px;.button:hover
background:#65a9d7;
color:#FFF;
text-decoration:none;
}
}
</style>
</head>
<body>
<div id="container">
<div id="topLoader">
</div>
<button id="animateButton" >WHAT'S YOUR NAME?</button>
<script>
$(function() {
var $topLoader = $("#topLoader").percentageLoader({width: 256, height: 256, controllable : true, progress : 0.5, onProgressUpdate : function(val) {
$topLoader.setValue(Math.round(val * 100.0));
}});
var topLoaderRunning = false;
$("#animateButton").click(function() {
if (topLoaderRunning) {
return;
}
topLoaderRunning = true;
$topLoader.setProgress(0);
$topLoader.setValue('0kb');
var kb = 0;
var totalKb = 999;
var animateFunc = function() {
kb += 17;
$topLoader.setProgress(kb / totalKb);
$topLoader.setValue(kb.toString() + 'kb');
if (kb < totalKb) {
setTimeout(animateFunc, 25);
} else {
topLoaderRunning = false;
}
}
setTimeout(animateFunc, 25);
});
});
</script>
</div>
</body>
</html>Discussão (0)
Carregando comentários...