บทความนี้อธิบายถึงวิธีการของ JS ในการใช้การขยายตัวและการหดตัวของชั้น div ที่มุมล่างขวา แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd html 4.0 transitional // en">
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> js ใช้เลเยอร์ div ที่สามารถขยายและหดตัวที่มุมล่างขวา </title>
<style type = "text/css">
-
*{margin: 0; padding: 0;}
ร่างกาย {text-allign: center;}
#Main {เส้นขอบ: สีแดง 1px solid; ความกว้าง: 1000px; ความสูง: 1600px; ระยะขอบ: 0 auto;}
#Main #Scroll {Width: 250px; ความสูง: 150px; ชายแดน: สีเขียว 1px Solid; text-solign: ซ้าย; ตำแหน่ง: Absolute; การมองเห็น: ซ่อน;
#Main #SCROLL #OPEN {Float: left; text-allign: center; width: 180px;}
#main #scroll #close {float: ขวา;}
-
</style>
</head>
<body>
<div id = "main">
ใช้เฉพาะส่วนหลักในการปรับปรุงเนื้อหาด้วยตัวคุณเองหรือทำให้สวยงามต่อไปมันควรจะดี!
<div id = "scroll"> <div id = "open" onMouseOver = "openbox ()"> <a href = "/" onclick = "openbox ()"> ยินดีต้อนรับ </a> <div id = "ปิด"> </marquee> </div> </div>
<div id = "close"> <a href = "#" onclick = "closebox ()"> ปิด </a>
<script type = "text/javascript">
-
var scroll = document.getElementById ("Scroll")
var main = document.getElementById ("หลัก")
var open = document.getElementById ("เปิด")
var close = document.getElementById ("ปิด")
scroll.style.visibility = "มองเห็นได้"
ฟังก์ชั่นรันไรท์ ()
-
/*ที่นี่ -4 เป็นหลักสำหรับการแสดงที่ดีกว่าเพราะฉันตั้งค่าเส้นขอบ*//
scroll.style.top = document.body.scrolltop+document.body.clientheight-scroll.clientheight-4+"px"
scroll.style.left = document.body.scrollleft+document.body.clientwidth-scroll.clientwidth-4+"px"
/*ดำเนินการฟังก์ชั่นนี้ทุกครั้งในขณะที่*/
Settimeout ("Runright ()", 30)
-
/*ปิด: ตั้งค่าความสูงที่จะลดลง*/
ฟังก์ชันปิดกล่อง ()
-
scroll.style.height = scroll.offsetheight-4+"px"
if (scroll.offsetheight> 20)
-
settimeout ("closebox ()", 5)
-
อื่น
-
close.style.visibility = "ซ่อน"
-
-
ฟังก์ชั่น OpenBox ()
-
if (scroll.offsetheight <148)
-
close.style.visibility = "มองเห็นได้"
scroll.style.height = scroll.offsetheight+2+"px"
Settimeout ("OpenBox ()", 5)
-
-
runright ();
-
</script>
</div>
</div>
</div>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน