تصف هذه المقالة طريقة 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>
<type type = "text/css">
<!-
*{الهامش: 0 ؛ حشو: 0 ؛}
الجسم {text-align: center ؛}
#main {الحدود: Red 1px Solid ؛ العرض: 1000px ؛ الارتفاع: 1600px ؛ الهامش: 0 Auto ؛}
#main #scroll {width: 250px ؛ الارتفاع: 150px ؛ الحدود: أخضر 1px صلبة ؛ محاذاة النص: اليسار ؛ الموضع: المطلق ؛ الرؤية: مخفية ؛}
#main #scroll #open {float: left ؛ text-align: center ؛ width: 180px ؛}
#main #scroll #close {float: right ؛}
//->
</style>
</head>
<body>
<div id = "main">
فقط تنفيذ الجزء الأساسي ، بالنسبة لتحسين المحتوى بنفسك ، أو الاستمرار في تجميله ، يجب أن يكون جيدًا!
<div id = "scroll"> <div id = "open" onMouseover = "OpenBox ()"> <a href = "/" onClick = "OpenBox ()"> الترحيب </a> <div id = "close"> <marquee align = "left" onMouseover = "stop ()" onMouseout = "start () </marquee> </viv> </viv>
<div id = "close"> <a href = "#" onClick = "closebox ()"> إغلاق </a>
<script type = "text/javaScript">
<!-
var scroll = document.getElementById ("Scroll")
var main = document.getElementById ("Main")
var open = document.getElementById ("Open")
var close = document.getElementById ("Close")
scroll.style.vibility = "مرئي"
وظيفة RunRight ()
{
/*هنا -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)
}
/*أغلق: اضبط الارتفاع المطلوب تقليله*/
وظيفة CloseBox ()
{
scroll.style.height = scroll.offsetheight-4+"px"
إذا (scroll.offsetheight> 20)
{
setTimeout ("CloseBox ()" ، 5)
}
آخر
{
close.style.vibility = "Hidden"
}
}
وظيفة OpenBox ()
{
إذا (scroll.offsetheight <148)
{
close.style.visibility = "مرئي"
scroll.style.height = scroll.offsetheight+2+"px"
setTimeout ("OpenBox ()" ، 5)
}
}
Runright () ؛
//->
</script>
</div>
</div>
</div>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.