ผล:
ความคิด:
ใช้ตัวจับเวลา setInterval สำหรับการเคลื่อนไหว offsetWidth เพื่อเปลี่ยนความกว้าง และใช้ onmouseover เพื่อวางจุดสิ้นสุดและ DIV ที่เลือกไว้ในพารามิเตอร์ก่อนที่จะบัฟเฟอร์การเคลื่อนไหว
รหัส:
คัดลอกรหัสรหัสดังต่อไปนี้:
<หัว runat="เซิร์ฟเวอร์">
<title></title>
<style type="text/css">
กอง
-
ความกว้าง: 100px;
ความสูง: 50px;
พื้นหลัง: #0000FF;
ระยะขอบ: 10px;
-
</สไตล์>
<script type="text/javascript">
window.onload = ฟังก์ชั่น () {
var oDiv = document.getElementsByTagName('div');
สำหรับ (var i = 0; i < oDiv.length; i++) {
oDiv[i].timer = null; //ทำเครื่องหมาย DIV เพื่อปิดตัวจับเวลาของ DIV ที่เกี่ยวข้อง
oDiv[i].onmouseover = ฟังก์ชั่น () {
ย้าย (นี่คือ 400); // ให้พารามิเตอร์เอาต์พุตตัวจับเวลา
-
oDiv[i].onmouseout = ฟังก์ชั่น () {
ย้าย(นี่, 100);
-
-
-
ฟังก์ชั่นย้าย (div, สิ้นสุด) {
clearInterval(div.จับเวลา);
div.timer = setInterval (ฟังก์ชัน () {
var speed = (end - div.offsetWidth) / 5; // (end - width to go) / ปัจจัยสเกล = ความเร็วของการเคลื่อนที่ของ DIV
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // การปัดเศษทศนิยม นั่นคือ การปัดเศษด้วยการปัดเศษ
if (div.offsetWidth == end) { //ปิดตัวจับเวลาเมื่อถึงจุดสิ้นสุด
clearInterval(div.จับเวลา);
-
อื่น {
div.style.width = div.offsetWidth + speed + 'px'; // ย้ายความกว้างของ DIV
-
}, 30)
-
</สคริปต์>
</หัว>
<ร่างกาย>
<div>
</div>
<div>
</div>
<div>
</div>
</ร่างกาย>