บทความนี้อธิบายวิธีการของ JS เพื่อให้ได้เอฟเฟกต์การเลือกกล่องเมาส์ แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
<! doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd"><html> เอฟเฟกต์การเลือกกล่องเมาส์ </title> <style> *{padding: 0; มาร์จิ้น: 0; } #bottom {ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0px; ความกว้าง: 100%; ความสูง: 40px; ชายแดน: 1px Solid #000; ความเป็นมา:#000; สี: #FFF; } .tempdiv {border: 1px ประสีฟ้า; ความเป็นมา:#5A72F8; ตำแหน่ง: สัมบูรณ์; ความกว้าง: 0; ความสูง: 0; ตัวกรอง: อัลฟ่า (ความทึบ: 10); ความทึบ: 0.1} </style> <script type = "text/javascript"> window.onload = function () {var statebar = document.getElementById ("ด้านล่าง"); document.onmousedown = function (e) {var posx = e.clientx; var posy = e.clienty; var div = document.createElement ("div"); div.className = "tempdiv"; div.style.left = e.clientx+"px"; div.style.top = e.clienty+"px"; document.body.appendchild (div); document.onmousemove = function (ev) {div.style.left = math.min (ev.clientx, posx) + "px"; div.style.top = math.min (ev.clienty, posy) + "px"; div.style.width = math.abs (posx - ev.clientx)+"px"; div.style.height = math.abs (posy - ev.clienty)+"px"; StateBar.innerHtml = "Mousex:" + ev.clientx + "<br/> Mousey:" + ev.clienty; document.onmouseup = function () {div.parentNode.removeChild (div); document.onmousemove = null; document.onmouseup = null; }}}} </script> </head> <body> <div id = "bottom"> </div> </body> </html>สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเอฟเฟกต์และเทคนิคการสลับ JavaScript", "สรุปทักษะอัลกอริธึมการค้นหา JavaScript", "สรุปผลการสรุปและเทคนิคการสรุปของ JavaScript ของ JavaScript อัลกอริทึมและเทคนิคการสำรวจ JavaScript "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน