Ciao a tutti. Sono nuovo della programmazione javascript (e programmazione in generale), ma, essendo una mia passione, volevo farmi un bel sito utilizzando (X)HTML+CSS+JAVASCRIPT(se possibile puro, quindi non jQuery o mootools ecc). Mi sono messo da un pò di tempo a cercare di ricreare l'effetto in javascript del menù di VLC e Quicktime in modalità fullscreen, ma a parte qualche intoppo iniziale, ora funziona abbastanza bene; quindi volevo chiedere a voi un aiuto per:
1. Ottimizzare il codice che probabilmente sarà rozzo, ridondante e molto spesso errato o come detto migliorabile;
2. Non sono ancora riuscito a ricreare appieno l'effetto del fading, che dovrebbe al movimento del mouse, con qualsiasi opacità, rifare il fade fino a raggiungere opacità 1 (non so spiegarmi un granché bene, lo so, ma vi basta aprire VLC o QT per capire cosa intendo); cioé che se il mouse è in movimento, il fade non arriva a 0 e poi riinizia, ma riprende dal punto in cui è al momento.
ecco il codice
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
border : 0;
border-spacing : 0;
font-family : "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size : 10px;
list-style-type : none;
margin : 0;
outline : none;
padding : 0;
text-decoration : none;
}
body {
background-image:url(../6e6665bd2d1af29fbc51cad8a7ec2e90.jpg);
}
#box {
border-bottom: 2px solid #999;
background : url(images/1pxK50pct.png);
font-size: 16px;
color: #FFF;
text-align: center;
height: 20px;
line-height: 20px;
width: 100%;
opacity: 1.00;
}
</style>
</head>
<body onLoad="startTimer();">
<script language="javascript">
document.onmousemove = resetTimer; // Aggiunto per la compatibilità con Safari
// Timer con timeOut a mouse inattivo
var IDLE_TIME = 1000;
var timerID = -1;
function resetTimer() {
if (timerID != -1) {
if (document.getElementById('box').style.opacity < '0.00') { // Aggiunto
fadeIn('box',300); // Aggiunto
} // Aggiunto
else { // Aggiunto
} // Aggiunto
clearTimeout(timerID);
startTimer();
}
}
function startTimer() {
timerID = window.setTimeout("timeOut()",IDLE_TIME);
}
function timeOut() {
if (timerID != -1) {
if (document.getElementById('box').style.opacity > '0.00') { // Aggiunto
fadeOut('box',1000); // Aggiunto
} // Aggiunto
else { // Aggiunto
document.getElementById('box').style.opacity = '0.00'; // Aggiunto
} // Aggiunto
startTimer();
}
}
// Effetto fade di Giulio Ganci
function fadeOut(divID, time) {
var speed = Math.round(time / 100);
var frame = 0;
for(fade = 100; fade >= 0; fade--) { // Modificato, adesso al posto di '>' adesso c'é '>='
setTimeout("setOpacity('"+divID+"', "+fade+")", (speed * frame));
frame++;
}
}
function fadeIn(divID, time) {
var speed = Math.round(time / 100);
var frame = 0;
for(fade = 0; fade <= 100; fade++) { // Modificato, adesso al posto di '<' adesso c'é '<='
setTimeout("setOpacity('"+divID+"', "+fade+")", (speed * frame));
frame++;
}
}
function setOpacity(id, opacity) {
var element = document.getElementById('box');
if(document.all)
element.style.filter = "alpha(opacity=" + opacity + ")";
else
element.style.opacity = opacity / 100;
}
// Mio codice
function onmover () {
document.onmousemove = null;
clearTimeout(timerID);
}
function onmout () {
document.onmousemove = resetTimer;
startTimer;
}
</script>
<div id="box" onmouseover="onmover();" onmouseout="onmout();">Effetto Fade Sfumatura (ajax) con javascript</div> <!--Aggiunto onmouseover e onmouseout
-->
</body>
</html>
Un grazie infinite, a chi mi risolve anche solo uno dei miei 2 problemi.
PS: Buon Anno Nuovo a tutti!!!
Rispondi quotando
