Efeito:
Ideia:
Use o temporizador setInterval para movimento, offsetWidth para alterar a largura e use onmouseover para colocar o ponto final e o DIV selecionado em parâmetros antes de armazenar em buffer o movimento.
Código:
Copie o código do código da seguinte forma:
<head runat="servidor">
<título></título>
<style type="texto/css">
divisão
{
largura: 100px;
altura: 50px;
plano de fundo: #0000FF;
margem: 10px;
}
</estilo>
<script type="texto/javascript">
janela.onload=função(){
var oDiv = document.getElementsByTagName('div');
for (var i = 0; i < oDiv.length; i++) {
oDiv[i].timer = null; //Marca um DIV para fechar o timer do DIV correspondente
oDiv[i].onmouseover = function () {
move(this, 400); //Fornece parâmetros de saída do temporizador
}
oDiv[i].onmouseout=função(){
mover(este, 100);
}
}
};
função mover(div, fim) {
clearInterval(div.timer);
div.timer=setInterval(função(){
var speed = (end - div.offsetWidth) / 5; // (end - largura restante) / fator de escala = velocidade do movimento DIV
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // Arredondamento decimal, ou seja, arredondamento com carry;
if (div.offsetWidth == end) { //Fecha o cronômetro quando o fim é alcançado
clearInterval(div.timer);
}
outro {
div.style.width = div.offsetWidth + speed + 'px' //Mover a largura do DIV;
}
}, 30)
}
</script>
</head>
<corpo>
<div>
</div>
<div>
</div>
<div>
</div>
</body>