Reloj. Efecto de movimiento y mover los minutos con la ruleta del ratón.
Copia y pegarlo en tu editor de texto y dale formato .html y ejecuta para verlo mejor .
<!DOCTYPE html><html>
<head>
<style>
#reloj {
width: 200px;
height: 200px;
position:absolute;
left:200px;
top:200px;
}
#segundos {
width: 200px;
height: 200px;
position:absolute;
left:200px;
top:200px;
}
#minutos {
width: 200px;
height: 200px;
position:absolute;
left:200px;
top:200px;
}
#manecillaSegundos {
margin-top:99px;
margin-left:100px;
border: 1px solid black;
width: 100px;
height: 2px;
background-color: red;
color: white;
}
#manecillaMinutos {
margin-top:98px;
margin-left:100px;
border: 1px solid black;
width: 70px;
height: 4px;
background-color: blue;
color: white;
}
</style>
<script>
var segundo=0;
var minuto =0;
function inicio(){
setTimeout("Moversegundos()",1);
}
function Moversegundos(){
segundo+=2;
segundos.style.transform = "rotate("+segundo+"deg)";
if(segundo % 360 != 0)
setTimeout("Moversegundos()",1);
else{
minuto+=2;
minutos.style.transform = "rotate("+minuto+"deg)";
setTimeout("Moversegundos()",1);
}
}
function ruleta(delta) {
if (delta <0)
{
minuto--;
minutos.style.transform = "rotate("+minuto+"deg)";
}
else
{
minuto++;
minutos.style.transform = "rotate("+minuto+"deg)";
}
}
function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail/3;
}
if (delta)
ruleta(delta);
}
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
</script>
</head>
<body onLoad="inicio()" >
<div id="zona">
<img id="reloj" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7kukTokPGUXnmoO_MCMEE9-FnGlnA8RxBV2K5QY7owFFI5s3QpBnUr4MzG7RDb3DBghavZKNYCcfmyRcyZdFL3rRqX8FRltufn2GUDwZXXdFQ4AtQt0zYNRCVLm-18K_ZYN2JY-bBE0Q/s328-no/Reloj.png" onmouseover="wheel(event)">
<div id="segundos">
<div id="manecillaSegundos"></div>
</div>
<div id="minutos">
<div id="manecillaMinutos"></div>
</div>
</div>
</body>
</html>
Comentarios