この記事では、マウスボックスの選択効果を実現するJSの方法について説明します。次のように、参照のために共有してください。
<！doctype html public " - // w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd"> <hhtml> <head>< meta http-iv =" content-type "content ="/html;選択効果</title> <style> *{padding：0;マージン：0; } #bottom {position：absolute;下：0px;幅：100％;高さ：40px;国境：1pxソリッド＃000;背景：＃000;色：#fff; } .tempdiv {border：1pxダッシュブルー;背景：＃5A72F8;位置：絶対;幅：0;高さ：0;フィルター：アルファ（不透明：10）;不透明：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; }}}} </script> </head> <body> <div id = "bottom"> </div> </body> </html>JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。