วันนี้ผมจะเขียนตัวอย่างเล็กๆ น้อยๆ โดยใช้ js และ css เขียนกล่องลอยที่สามารถซ่อนได้โดยอัตโนมัติ CSS ใช้เพื่อควบคุมสไตล์อย่างแน่นอน และ js ใช้เพื่อควบคุมการแสดงผลและการซ่อน โดยปกติการแสดงและการซ่อนจะดำเนินการในสองวิธี: 1. ใช้ js เพื่อควบคุมคุณลักษณะการแสดงผล 2. ใช้ js เพื่อควบคุมขนาด
สิ่งที่เราจะพูดถึงในวันนี้คือการรับรู้ถึงการแสดงและการซ่อนองค์ประกอบโดยการควบคุมขนาด หลักการคือ: บันทึกเหตุการณ์การเคลื่อนที่ของเมาส์เข้าและออก เมื่อเมาส์เคลื่อนออกจากช่วงวัตถุ ให้ตั้งค่าความกว้างเป็น 1. เมื่อเมาส์เคลื่อนเข้าไปในวัตถุอีกครั้ง ให้ตั้งค่าความกว้างเป็น 1 คืนค่าความกว้างแล้ว ง่ายมาก มาดูกัน!
สถานะที่ซ่อนอยู่:
เส้นแคบด้านซ้ายคือกรอบลอยหลังซ่อนไว้
สถานะการแสดงผล:
เมื่อเลื่อนเมาส์ไปเหนือกล่องลอยทางด้านซ้าย กล่องลอยจะปรากฏขึ้นอีกครั้ง
สไตล์ CSS:
คัดลอกรหัสรหัสดังต่อไปนี้:
<สไตล์>
* { ขนาดตัวอักษร:12px; ตระกูลแบบอักษร:Verdana, 宋体;
html, เนื้อความ { ระยะขอบ: 0px; การขยาย: 0px;
.b { ระยะขอบ: 0px; การขยาย: 0px;
.line0 { line-height:20px; พื้นหลังสี: lightyellow;
.line1 { line-height:18px; พื้นหลังสี: lightblue;
.w { ตำแหน่ง:สัมบูรณ์; ยก:10px; ความกว้าง:1px; ความสูง:300px; เส้นขอบ:2px เคอร์เซอร์:ค่าเริ่มต้น;
.t { line-height:20px; height:20px; width:160px; overflow:hidden; ศูนย์; }
.winBody { ความสูง: 270px; ความกว้าง: 160px; overflow-x: auto;
</สไตล์>
รหัส JS:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
ฟังก์ชั่น myshow(){
//document.getElementById('mydiv').style.display = "none";
document.getElementById('mydiv').style.width = "160px";
} //ปิดกั้น
ฟังก์ชั่น myhide(){
//document.getElementById('mydiv').style.display = "บล็อก";
document.getElementById('mydiv').style.width="1px";
-
//สำหรับการทดสอบ ให้สุ่มสร้างเนื้อหาบางส่วนเพื่อรองรับผลการทดสอบ
for(var i=0; i<400; i++)document.write("<div class=/"line"+(i%2)+"/">"+(อาร์เรย์ใหม่ (20)).join(( Math.random()*1000000).toString(36)+" ")+"<//div>");
ฟังก์ชั่นใหม่ (w,b,c,d,o){
d=document;b=d.body;o=b.childNodes;c="className";
b.appendChild(w=d.createElement("div"))[c]= "b";
สำหรับ(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
(window.onresize = function(){
w.style.width = d.documentElement.clientWidth + "px";
w.style.height = d.documentElement.clientHeight + "px";
-
<span style="สีขาว-space:pre"> </span>}
</สคริปต์>
รหัส HTML:
คัดลอกรหัสรหัสดังต่อไปนี้:
<ร่างกาย>
<div id="mydiv" onmousemove="myshow()" onmouseout="myhide()">
<div>ข้อมูลนักศึกษา</div>
<div>
รหัสนักศึกษา: <label>0123456789 </label><br><br>
ชื่อ: <label>เสี่ยวหมิง</label><br><br>
วิทยาลัย: <label>วิทยาลัยซอฟต์แวร์</label><br><br>
สาขา: <label>วิศวกรรมซอฟต์แวร์</label><br><br>
คลาส: <label>คลาส 1</label><br><br>
</div>
</div>
</ร่างกาย>
ใช้กล่องลอยเพื่อแสดงข้อมูลบางอย่าง เมื่อคุณต้องการดู ให้ชี้ไปที่นั้น มันจะออกมา ซึ่งสะดวกมาก เมื่อคุณเลื่อนเมาส์ออกไปเมื่อไม่ต้องการอีกต่อไป มันก็จะออกไปเองอย่างเงียบๆ . แม้ว่าจะเรียบง่ายมาก แต่ก็มอบประสบการณ์การใช้งานที่ดีแก่ผู้ใช้ การทำสิ่งต่าง ๆ ที่ทำให้ผู้ใช้สะดวกสบายคือการแสวงหาอย่างต่อเนื่องของเรา