تصف هذه المقالة طريقة JS لتحقيق تأثير اختيار مربع الماوس. شاركه للرجوع إليه ، على النحو التالي:
<! doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3. تأثير تحديد المربع </title> <style> *{padding: 0 ؛ الهامش: 0 ؛ } #bottom {position: absolute ؛ أسفل: 0px ؛ العرض: 100 ٪ ؛ الارتفاع: 40 بكسل ؛ الحدود: 1 بكسل الصلبة #000 ؛ الخلفية:#000 ؛ اللون: #fff ؛ . الخلفية:#5A72F8 ؛ الموقف: مطلق ؛ العرض: 0 ؛ الارتفاع: 0 ؛ مرشح: ألفا (التعتيم: 10) ؛ Opacity: 0.1} </style> <script type = "text/javaScript"> window.onload = function () {var stateBar = document.getElementById ("Bottom") ؛ 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 ؛ }}}}>لمزيد من المعلومات حول المحتوى المتعلق بـ javaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لتأثيرات وتقنيات تبديل JavaScript" ، "ملخص لمهارات خوارزمية بحث JavaScript" ، "ملخص لتأثيرات الرسوم المتحركة JavaScript و Techniques و" ملخص ". خوارزميات وتقنيات JavaScript Traversal "، و" ملخص استخدام العمليات الرياضية JavaScript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.