効果：
アイデア：
移動には setInterval タイマーを使用し、幅を変更するには offsetWidth を使用します。移動をバッファリングする前に、onmouseover を使用してエンドポイントと選択した DIV をパラメータに入れます。
コード：
次のようにコードをコピーします。
<head runat="サーバー">
<タイトル></タイトル>
<style type="text/css">
ディビジョン
{
幅: 100ピクセル;
高さ: 50ピクセル;
背景: #0000FF;
マージン: 10px;
}
</スタイル>
<script type="text/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 = function () {
move(this, 100);
}
}
};
関数 move(div, end) {
clearInterval(div.timer);
div.timer = setInterval(function() {
varspeed = (end - div.offsetWidth) // (end - 移動する幅) / スケーリング係数 = DIV の移動速度
Speed = Speed > 0 ? Math.ceil(speed) : Math.floor(speed) // 小数点の四捨五入、つまり桁上げによる丸め
if (div.offsetWidth == end) { //終了に達したらタイマーを閉じる
clearInterval(div.timer);
}
それ以外 {
div.style.width = div.offsetWidth +speed + 'px'; //DIV の幅を移動します。
}
}、30)
}
</script>
</head>
<本文>
<div>
</div>
<div>
</div>
<div>
</div>
</body>