Эффект:
Идея:
Используйте таймер setInterval для перемещения, offsetWidth для изменения ширины и используйте onmouseover, чтобы поместить конечную точку и выбранный DIV в параметры перед буферизацией движения.
Код:
Скопируйте код кода следующим образом:
<head runat="сервер">
<title></title>
<style type="text/css">
делитель
{
ширина: 100 пикселей;
высота: 50 пикселей;
фон: #0000FF;
поле: 10 пикселей;
}
</стиль>
<тип сценария="текст/javascript">
window.onload = функция () {
var oDiv = document.getElementsByTagName('div');
for (var i = 0; i < oDiv.length; i++) {
oDiv[i].timer = null //Отметьте DIV, чтобы закрыть таймер соответствующего DIV;
oDiv[i].onmouseover = function () {
move(this, 400); //Выдаем выходные параметры таймера
}
oDiv[i].onmouseout = функция () {
переместить(это, 100);
}
}
};
функция move(div, end) {
ClearInterval (div.timer);
div.timer = setInterval(function () {
var скорость = (end - div.offsetWidth) / 5 // (конец - оставшаяся ширина) / коэффициент масштабирования = скорость перемещения DIV;
скорость = скорость > 0 ? Math.ceil(speed) : Math.floor(speed); // Десятичное округление, то есть округление с переносом;
if (div.offsetWidth == end) { //Закрываем таймер при достижении конца
ClearInterval (div.timer);
}
еще {
div.style.width = div.offsetWidth + скорость + 'px' //Перемещаем ширину DIV;
}
}, 30)
}
</скрипт>
</голова>
<тело>
<дел>
</div>
<дел>
</div>
<дел>
</div>
</тело>