โดยทั่วไปแล้วจะทำโดยใช้เมาส์โฮเวอร์โอเวอร์โอเวอร์และการกำจัดเมาส์
ประการแรกคือโครงสร้าง HTML
การคัดลอกรหัสมีดังนี้:
<body>
<div id = "div1">
<span> แถบด้านข้าง </span>
</div>
</body>
จากนั้นมีสไตล์ของ CSS:
การคัดลอกรหัสมีดังนี้:
#div1 {
ความกว้าง: 150px;
ความสูง: 200px;
ความเป็นมา:#999999;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: -150px;}
ช่วง {
ความกว้าง: 20px;
ความสูง: 70px;
ความสูงบรรทัด: 23px;
ความเป็นมา:#09C;
ตำแหน่ง: สัมบูรณ์;
ขวา: -20px;
ด้านบน: 70px;}
แถบด้านข้างสไตล์เริ่มต้นจะถูกซ่อนดังที่แสดงในรูป:
เมื่อเมาส์ถูกย้ายเข้ามาดังแสดงในรูป:
นี่คือรหัสที่สมบูรณ์:
การคัดลอกรหัสมีดังนี้:
<! 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" />
<tite> เอกสารชื่อ UNT </title>
<style type = "text/css">
#div1 {
ความกว้าง: 150px;
ความสูง: 200px;
ความเป็นมา:#999999;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: -150px;}
ช่วง {
ความกว้าง: 20px;
ความสูง: 70px;
ความสูงบรรทัด: 23px;
ความเป็นมา:#09C;
ตำแหน่ง: สัมบูรณ์;
ขวา: -20px;
ด้านบน: 70px;}
</style>
<script>
window.onload = function () {
var odiv = document.getElementById ('div1');
odiv.onmouseover = function ()
-
StartMove (0,10); // พารามิเตอร์แรกคือค่าเป้าหมายของแอตทริบิวต์ DIV ซ้าย
-
odiv.onmouseout = function ()
-
startmove (-150, -10);
-
-
ตัวจับเวลา var = null;
ฟังก์ชั่น startmove (เป้าหมายความเร็ว)
-
var odiv = document.getElementById ('div1');
ClearInterval (ตัวจับเวลา);
timer = setInterval (ฟังก์ชัน () {
if (odiv.offsetleft == เป้าหมาย)
-
ClearInterval (ตัวจับเวลา);
-
อื่น
-
odiv.style.left = odiv.offsetleft+ความเร็ว+'px';
-
}, 30)
-
</script>
</head>
<body>
<div id = "div1">
<span> แถบด้านข้าง </span>
</div>
</body>
</html>